title: How to test conditional styling made with Material UI makeStyles()?
body: <p>I've been working on a React app for a few weeks and I use Material UI components for most of by base.</p>
  <p>I have this component that has its style change depending on the values of its props. To do this, I did something like:</p>
  <pre><code>  const useStyles = makeStyles({
      component: {
        ...
        backgroundColor: getComponentBackgroundColor(),
        ...
      }
    });
  </code></pre>
  <p>with <code>getComponentBackgroundColor()</code> being defined as</p>
  <pre><code>  const getComponentBackgroundColor = () =&gt; {
      if (props.someProp) {
        return &quot;green&quot;;
      }
      return &quot;red&quot;;
    };
  </code></pre>
  <p>and then by setting the component's <code>className</code>.</p>
  <p>My problem is that I want to test this component to ensure that the styling is correctly applied (some <code>getStyle()</code> methods are more complex than juste looking if a prop exists or not).</p>
  <p>I'm using the <code>react-testing-library</code> and my first instinct was to check if the rendered component had the right <code>className</code>, but upon further inspection, I realized that <code>makeStyle()</code> assigns some random className like <code>makeStyles-component-12</code> to each component. I also noticed that components with the same styling had different classNames. So that was a no-go.</p>
  <p>Is there an easy way to test conditional styling when using Material UI's <code>makeStyles()</code> ?</p>
  <p>Thanks a bunch.</p>