Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't override class name imgFullHeight of component GridListTile #9856

Closed
1 task done
KevinAsher opened this issue Jan 12, 2018 · 1 comment
Closed
1 task done
Labels
bug 🐛 Something doesn't work component: image list This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process.

Comments

@KevinAsher
Copy link
Contributor

  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior

When overriding the class name imgFullHeight via classes property injection (according to the docs here) an error occurs:

InvalidCharacterError
Failed to execute 'add' on 'DOMTokenList': The token provided ('MuiGridListTile-imgFullHeight-558 TitlebarGridList-buggyClass-554') contains HTML space characters, which are not valid in tokens.

Steps to Reproduce

The sandbox is a copy-pasta from the demo of the docs, with an added class called buggyClass

Edit Bug report material-ui imgFullHeight

Your Environment

Tech Version
Material-UI 1.0.0-beta.26
React 16.2.0
browser Chrome 63.0.3239.132
@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work component: image list This is the name of the generic UI component, not the React module! labels Jan 13, 2018
@oliviertassinari oliviertassinari added the good first issue Great for first contributions. Enable to learn the contribution process. label Jan 13, 2018
@oliviertassinari
Copy link
Member

@KevinAsher Thanks for raising the issue. It can be fixed with the following diff:

    if (
      imgElement.width / imgElement.height >
      imgElement.parentNode.offsetWidth / imgElement.parentNode.offsetHeight
    ) {
-     imgElement.classList.remove(this.props.classes.imgFullWidth);
-     imgElement.classList.add(this.props.classes.imgFullHeight);
+     imgElement.classList.remove(...this.props.classes.imgFullWidth.split(' '));
+     imgElement.classList.add(...this.props.classes.imgFullHeight.split(' '));
    } else {
-     imgElement.classList.remove(this.props.classes.imgFullHeight);
-     imgElement.classList.add(this.props.classes.imgFullWidth);
+     imgElement.classList.remove(...this.props.classes.imgFullHeight.split(' '));
+     imgElement.classList.add(...this.props.classes.imgFullWidth.split(' '));
    }

Do you want to submit a pull-request?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: image list This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process.
Projects
None yet
Development

No branches or pull requests

2 participants