Styles on Material-UI: Undefined CSS fields

Question

I'm trying to add this CSS class to an element from Material-UI :

bw:hover {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Could be done using makeStyles :

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  bw: {
      filter: grayscale('100%'),
  },
});

But this is not working because grayscale is undefined .

I really do not see any advantages on this style of styling with makeStyles and all other classes from Material-UI : you do not only have to change the syntax to adapt it to JavaScript syntax there are also some properties do not exist! wtf!

Well, enough bashing, so I though, just override the component style:

And so, I went to the docs of this component: CardMedia from Material-UI, according to it I should be able to override the css class of the image tag: .MuiCardMedia-img , so I tryied to override it directly on the .css file of the app but again it just does not work:

.MuiCardMedia-img:hover {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

Maybe I did not understand something, I'll appreciate any help

Answer 1

You need to change it as a string in makeStyles just like the following:

const useStyles = makeStyles({
  bw: {
    filter: `grayscale('100%')`,
  },
});

In your case, it is looking for a function called grayscale which is not existing in your code. It is just a CSS property and that's how you pass to makeStlyles .

I hope this helps!

Answer 2

You can override the css of any material component will be like this

const style = {
  newMedia: {
    //css property
  }
}

<CardMedia classes={{media: classes.newMedia}} />

I added this link below, Please check and update if this will work for you.

https://codesandbox.io/s/sharp-rubin-4viw0