title: makeStyles does not respond to dynamic CSS variables
body: <pre><code>const useStyles = makeStyles({
    paper: {
      color: &quot;var(--text-color) !important&quot;,
    },
  })
  </code></pre>
  <p>The CSS variable <code>var(--text-color)</code> changes throughout the APP based on a toggle. But the component that uses this <code>useStyles</code> does not change with it.</p>
  <p>What is wrong here?</p>
  <p>EDITED:</p>
  <p>This fixed it:</p>
  <pre><code>          &lt;Autocomplete disablePortal /&gt;
  </code></pre>
  <p>Now, can someone explain why?</p>