title: Styles on Material-UI: Undefined CSS fields
body: <p>I'm trying to add this <code>CSS</code> class to an element from <strong>Material-UI</strong>:</p>
  
  <pre class="lang-css prettyprint-override"><code>bw:hover {
      -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
      filter: grayscale(100%);
  }
  </code></pre>
  
  <p>Could be done using <code>makeStyles</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { makeStyles } from '@material-ui/core/styles';
  
  const useStyles = makeStyles({
    bw: {
        filter: grayscale('100%'),
    },
  });
  </code></pre>
  
  <p>But this is not working because <strong><code>grayscale</code> is undefined</strong>.</p>
  
  <p>I really do not see any advantages on this style of styling with <code>makeStyles</code> and all other classes from <strong>Material-UI</strong>: you do not only have to change the syntax to adapt it to JavaScript syntax there are also some properties do not exist! wtf!</p>
  
  <p>Well, enough bashing, so I though, just override the component style:</p>
  
  <p>And so, I went to the docs of this component: <a href="https://material-ui.com/api/card-media/" rel="nofollow noreferrer">CardMedia</a> from Material-UI, according to it I should be able to override the css class of the image tag:<code>.MuiCardMedia-img</code>, so I tryied to override it directly on the .css file of the app but again it just does not work:</p>
  
  <pre class="lang-cs prettyprint-override"><code>.MuiCardMedia-img:hover {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
  }
  </code></pre>
  
  <p>Maybe I did not understand something, I'll appreciate any help</p>