title: Material UI react testing custom styles
body: <p>I'm struggling to come up with a sensible way of asserting that a given style will be added to a Material-UI component when a given prop is specified</p>
  
  <pre class="lang-js prettyprint-override"><code>import makeStyles from "@material-ui/core/styles/makeStyles";
  
  const useStyles = makeStyles({
    myRoot: props =&gt; props.inverse &amp;&amp; {
      border: "2px solid red",
    },
  })
  
  const MyTextInput = ({ inverse, ...otherProps }) =&gt; {
    const classes = useStyles({ inverse });
    return (
      &lt;TextField
        label="Standard secondary"
        color="secondary"
        classes={{
          root: classes.myRoot,
        }}
      /&gt;
    );
  }
  
  
  // with inverse
  &lt;MyTextInput
    label="Standard secondary"
    color="secondary"
    inverse={true}
  /&gt;
  
  // without inverse prop
  &lt;MyTextInput
    label="Standard secondary"
    color="secondary"
  /&gt;
  </code></pre>
  
  <p>Is there a sensible way to test that the correct class has been applied?</p>
  
  <p>I notice that when I render the component multiple times, the className + a number will be added to all instances e.g. <code>makeStyles-myRoot-*</code>.</p>
  
  <p>Is there way of confirming that the correct style has been applied?</p>
  
  <p>I'm using <code>react-testing-library</code> if that helps.</p>