<p dir="auto">I'm in the process of getting MUI@next to work with next.js, and I just wanted to pass on my experience so far. Even though MUI uses JSS, it feels like MUI is getting involved in a lot of areas that are already handled by <code class="notranslate">react-jss</code> MUI now has its own SSR configuration, separate from <code class="notranslate">jss</code> and <code class="notranslate">react-jss</code>, and this, to me, feels like a possible mistake. Personally, I wish MUI just deferred SSR configuration to the JSS suite. If it did that, then a there would be a single point of SSR configuration for all use of JSS within an app, rather than separate MUI and non-MUI configurations. Also, <code class="notranslate">react-jss</code> now supports the the new JSS function properties, automatically generating both a static and dynamic stylesheet for the wrapped react component, and passing in the component props to all of the function properties. It seems like a decision was made to not use that library, and instead have a combination of <code class="notranslate">jss-theme-reactor</code> and <code class="notranslate">MuiThemeProvider</code> take over those responsibilities. This means that, as <code class="notranslate">react-jss</code> evolves, MUI will have to duplicate features to stay current.</p>
<p dir="auto">I realize that a shortcoming with <code class="notranslate">react-jss</code> has been that it can only take in an object when injecting a stylesheet, when what we really want is for it to take in a function like <code class="notranslate">theme =&gt; stylesheet</code>, and this is probably the main perk of theme reactor. Now, with function properties, we can do:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="injectSheet({
  backgroundColor: ({theme}) =&gt; theme.backgroundColor,
  color: ({theme}) =&gt; theme.color
})"><pre class="notranslate"><code class="notranslate">injectSheet({
  backgroundColor: ({theme}) =&gt; theme.backgroundColor,
  color: ({theme}) =&gt; theme.color
})
</code></pre></div>
<p dir="auto">It's more verbose, but it works. All that would be necessary would be to wrap the <code class="notranslate">react-jss</code> <code class="notranslate">injectSheet</code> HOC like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export const withStyles = styleSheet =&gt; compose(
  withTheme,
  injectSheet(styleSheet)
)"><pre class="notranslate"><code class="notranslate">export const withStyles = styleSheet =&gt; compose(
  withTheme,
  injectSheet(styleSheet)
)
</code></pre></div>
<p dir="auto">If all of the MUI components then used that HOC, SSR config could be done just with the <code class="notranslate">react-jss</code> <code class="notranslate">StyleRegistryProvider</code></p>
<p dir="auto">If using function properties for theme-related styles is too much overhead, then perhaps the <code class="notranslate">withStyles</code> HOC could be reworked to both take in a <code class="notranslate">theme =&gt; stylesheet</code> function, populate an object with the theme data, and then delegate to <code class="notranslate">injectSheet</code> for the actual stylesheet injection. That way we would have the best of all worlds: a choice between static or dynamic theme-based styles.</p>
<p dir="auto">Just my two cents. Thanks for the amazing library.</p>
<p dir="auto">Jay</p>
<p dir="auto">Hello,</p>
<p dir="auto">It's great to have code sandbox in docs. It'll save me a lot of time while prototyping.</p>
<p dir="auto">I realized that, drawers(completely) and components with images are not working properly.</p>
<p dir="auto">Avatar;</p>
<p dir="auto">Drawer;<br>
<a href="https://material-ui.com/demos/drawers/" rel="nofollow">https://material-ui.com/demos/drawers/</a><br>
<a href="https://codesandbox.io/s/zpro6nj7m" rel="nofollow">https://codesandbox.io/s/zpro6nj7m</a></p>
<p dir="auto">Gridlist;<br>
<a href="https://codesandbox.io/s/r4mk39vkxq" rel="nofollow">https://codesandbox.io/s/r4mk39vkxq</a></p>
<p dir="auto">etc.</p>
<p dir="auto">Thank you for your effort.</p>