Frequently Asked Questions

Stuck on a particular problem? Check some of these common gotchas first in the FAQ.

If you still can't find what you're looking for, you can refer to our support page.

MUI is awesome. How can I support the company?

There are many ways to support MUI:

Spread the word. Evangelize MUI's products by linking to mui.com on your website—every backlink matters. Follow us on Twitter, like and retweet the important news. Or just talk about us with your friends.
Give us feedback. Tell us what we're doing well or where we can improve. Please upvote (👍) the issues that you are the most interested in seeing solved.
Help new users. You can answer questions on Stack Overflow.
Make changes happen.
- Edit the documentation. Every page has an "EDIT THIS PAGE" link in the top right.
- Report bugs or missing features by creating an issue.
- Review and comment on existing pull requests and issues.
- Help translate the documentation.
- Improve our documentation, fix bugs, or add features by submitting a pull request.
Support us financially on OpenCollective. If you use Material UI in a commercial project and would like to support its continued development by becoming a Sponsor, or in a side or hobby project and would like to become a Backer, you can do so through OpenCollective. All funds donated are managed transparently, and Sponsors receive recognition in the README and on the MUI home page.

Scrolling is blocked as soon as a modal is opened. This prevents interacting with the background when the modal should be the only interactive content. However, removing the scrollbar can make your fixed positioned elements move. In this situation, you can apply a global .mui-fixed class name to tell Material UI to handle those elements.

How can I disable the ripple effect globally?

The ripple effect is exclusively coming from the BaseButton component. You can disable the ripple effect globally by providing the following in your theme:

<span class="token keyword">import</span> <span class="token punctuation">{</span> createTheme <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mui/material'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">createTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// Name of the component ⚛️</span>
    <span class="token literal-property property">MuiButtonBase</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">defaultProps</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// The props to apply</span>
        <span class="token literal-property property">disableRipple</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// No more ripple, on the whole application 💣!</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

How can I disable transitions globally?

Material UI uses the same theme helper for creating all its transitions. Therefore you can disable all transitions by overriding the helper in your theme:

<span class="token keyword">import</span> <span class="token punctuation">{</span> createTheme <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mui/material'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">createTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">transitions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// So we have `transition: none;` everywhere</span>
    <span class="token function-variable function">create</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">'none'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

It can be useful to disable transitions during visual testing or to improve performance on low-end devices.

You can go one step further by disabling all transitions and animations effects:

<span class="token keyword">import</span> <span class="token punctuation">{</span> createTheme <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mui/material'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">createTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// Name of the component ⚛️</span>
    <span class="token literal-property property">MuiCssBaseline</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">styleOverrides</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token string-property property">'*, *::before, *::after'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">transition</span><span class="token operator">:</span> <span class="token string">'none !important'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">animation</span><span class="token operator">:</span> <span class="token string">'none !important'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

Notice that the usage of CssBaseline is required for the above approach to work. If you choose not to use it, you can still disable transitions and animations by including these CSS rules:

<span class="token selector">*,
*::before,
*::after</span> <span class="token punctuation">{</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> <span class="token string">'none !important'</span><span class="token punctuation">;</span>
  <span class="token property">animation</span><span class="token punctuation">:</span> <span class="token string">'none !important'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

Do I have to use Emotion to style my app?

No, it's not required. But if you are using the default styled engine (@mui/styled-engine) the Emotion dependency comes built in, so carries no additional bundle size overhead.

Perhaps, however, you're adding some Material UI components to an app that already uses another styling solution, or are already familiar with a different API, and don't want to learn a new one? In that case, head over to the Style library interoperability section, where we show how simple it is to restyle Material UI components with alternative style libraries.

When should I use inline-style vs. CSS?

As a rule of thumb, only use inline-styles for dynamic style properties. The CSS alternative provides more advantages, such as:

auto-prefixing
better debugging
media queries
keyframes

How do I use react-router?

We detail the integration with third-party routing libraries like react-router, Gatsby or Next.js in our guide.

How can I access the DOM element?

All Material UI components that should render something in the DOM forward their ref to the underlying DOM component. This means that you can get DOM elements by reading the ref attached to Material UI components:

<span class="token comment">// or a ref setter function</span>
<span class="token keyword">const</span> ref <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// render</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>ref<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
<span class="token comment">// usage</span>
<span class="token keyword">const</span> element <span class="token operator">=</span> ref<span class="token punctuation">.</span>current<span class="token punctuation">;</span>

If you're not sure if the Material UI component in question forwards its ref you can check the API documentation under "Props" e.g. the Button API includes

indicating that you can access the DOM element with a ref.

My App doesn't render correctly on the server

If it doesn't work, in 99% of cases it's a configuration issue. A missing property, a wrong call order, or a missing component – server-side rendering is strict about configuration.

The best way to find out what's wrong is to compare your project to an already working setup. Check out the reference implementations, bit by bit.

Why are the colors I am seeing different from what I see here?

The documentation site is using a custom theme. Hence, the color palette is different from the default theme that Material UI ships. Please refer to this page to learn about theme customization.

Why does component X require a DOM node in a prop instead of a ref object?

Components like the Portal or Popper require a DOM node in the container or anchorEl prop respectively. It seems convenient to simply pass a ref object in those props and let Material UI access the current value.

This works in a simple scenario:

<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> container <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useRef</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>App<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Portal</span></span> <span class="token attr-name">container</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>container<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>portaled children<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Portal</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>container<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

where Portal would only mount the children into the container when container.current is available. Here is a naive implementation of Portal:

<span class="token keyword">function</span> <span class="token function">Portal</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> children<span class="token punctuation">,</span> container <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span>node<span class="token punctuation">,</span> setNode<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useState</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  React<span class="token punctuation">.</span><span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    <span class="token function">setNode</span><span class="token punctuation">(</span>container<span class="token punctuation">.</span>current<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>container<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">if</span> <span class="token punctuation">(</span>node <span class="token operator">===</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> ReactDOM<span class="token punctuation">.</span><span class="token function">createPortal</span><span class="token punctuation">(</span>children<span class="token punctuation">,</span> node<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

With this simple heuristic Portal might re-render after it mounts because refs are up-to-date before any effects run. However, just because a ref is up-to-date doesn't mean it points to a defined instance. If the ref is attached to a ref forwarding component it is not clear when the DOM node will be available. In the example above, the Portal would run an effect once, but might not re-render because ref.current is still null. This is especially apparent for React.lazy components in Suspense. The above implementation could also not account for a change in the DOM node.

This is why we require a prop with the actual DOM node so that React can take care of determining when the Portal should re-render:

<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span>container<span class="token punctuation">,</span> setContainer<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useState</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> handleRef <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useCallback</span><span class="token punctuation">(</span>
    <span class="token punctuation">(</span><span class="token parameter">instance</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setContainer</span><span class="token punctuation">(</span>instance<span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">[</span>setContainer<span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>App<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Portal</span></span> <span class="token attr-name">container</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>container<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>Portaled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Portal</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>handleRef<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

What's the clsx dependency for?

clsx is a tiny utility for constructing className strings conditionally, out of an object with keys being the class strings, and values being booleans.

Instead of writing:

<span class="token comment">// let disabled = false, selected = true;</span>

<span class="token keyword">return</span> <span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span>
    <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">MuiButton-root </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>disabled <span class="token operator">?</span> <span class="token string">'Mui-disabled'</span> <span class="token operator">:</span> <span class="token string">''</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>
      selected <span class="token operator">?</span> <span class="token string">'Mui-selected'</span> <span class="token operator">:</span> <span class="token string">''</span>
    <span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span>
  <span class="token punctuation">/></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

you can do:

<span class="token keyword">import</span> clsx <span class="token keyword">from</span> <span class="token string">'clsx'</span><span class="token punctuation">;</span>

<span class="token keyword">return</span> <span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span>
    <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">clsx</span><span class="token punctuation">(</span><span class="token string">'MuiButton-root'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      <span class="token string-property property">'Mui-disabled'</span><span class="token operator">:</span> disabled<span class="token punctuation">,</span>
      <span class="token string-property property">'Mui-selected'</span><span class="token operator">:</span> selected<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
  <span class="token punctuation">/></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

I cannot use components as selectors in the styled() utility. What should I do?

If you are getting the error: TypeError: Cannot convert a Symbol value to a string, take a look at the styled() docs page for instructions on how you can fix this.

[legacy] I have several instances of styles on the page

If you are seeing a warning message in the console like the one below, you probably have several instances of @mui/styles initialized on the page.

Possible reasons

There are several common reasons for this to happen:

You have another @mui/styles library somewhere in your dependencies.
You have a monorepo structure for your project (e.g, lerna, yarn workspaces) and @mui/styles module is a dependency in more than one package (this one is more or less the same as the previous one).
You have several applications that are using @mui/styles running on the same page (e.g., several entry points in webpack are loaded on the same page).

Duplicated module in node_modules

If you think that the issue may be in the duplication of the @mui/styles module somewhere in your dependencies, there are several ways to check this. You can use npm ls @mui/styles, yarn list @mui/styles or find -L ./node_modules | grep /@mui/styles/package.json commands in your application folder.

If none of these commands identified the duplication, try analyzing your bundle for multiple instances of @mui/styles. You can just check your bundle source, or use a tool like source-map-explorer or webpack-bundle-analyzer.

If you identified that duplication is the issue that you are encountering there are several things you can try to solve it:

If you are using npm you can try running npm dedupe. This command searches the local dependencies and tries to simplify the structure by moving common dependencies further up the tree.

If you are using webpack, you can change the way it will resolve the @mui/styles module. You can overwrite the default order in which webpack will look for your dependencies and make your application node_modules more prioritized than default node module resolution order:

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">resolve: {
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  alias: {
</span><span class="token prefix inserted">+</span><span class="token line">    '@mui/styles': path.resolve(appFolder, 'node_modules', '@mui/styles'),
</span><span class="token prefix inserted">+</span><span class="token line">  },
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">},</span></span>

Running multiple applications on one page

If you have several applications running on one page, consider using one @mui/styles module for all of them. If you are using webpack, you can use CommonsChunkPlugin to create an explicit vendor chunk, that will contain the @mui/styles module:

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> module.exports = {
</span><span class="token prefix unchanged"> </span><span class="token line">   entry: {
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">     vendor: ['@mui/styles'],
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">     app1: './src/app.1.js',
</span><span class="token prefix unchanged"> </span><span class="token line">     app2: './src/app.2.js',
</span><span class="token prefix unchanged"> </span><span class="token line">   },
</span><span class="token prefix unchanged"> </span><span class="token line">   plugins: [
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">     new webpack.optimize.CommonsChunkPlugin({
</span><span class="token prefix inserted">+</span><span class="token line">       name: 'vendor',
</span><span class="token prefix inserted">+</span><span class="token line">       minChunks: Infinity,
</span><span class="token prefix inserted">+</span><span class="token line">     }),
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   ]
</span><span class="token prefix unchanged"> </span><span class="token line"> }</span></span>

[legacy] Why aren't my components rendering correctly in production builds?

The #1 reason this happens is likely due to class name conflicts once your code is in a production bundle. For Material UI to work, the className values of all components on a page must be generated by a single instance of the class name generator.

To correct this issue, all components on the page need to be initialized such that there is only ever one class name generator among them.

You could end up accidentally using two class name generators in a variety of scenarios:

You accidentally bundle two versions of @mui/styles. You might have a dependency not correctly setting Material UI as a peer dependency.
You are using StylesProvider for a subset of your React tree.
You are using a bundler and it is splitting code in a way that causes multiple class name generator instances to be created.

Overall, it's simple to recover from this problem by wrapping each Material UI application with StylesProvider components at the top of their component trees and using a single class name generator shared among them.

[legacy] CSS works only on first load and goes missing

The CSS is only generated on the first load of the page. Then, the CSS is missing on the server for consecutive requests.

Action to Take

The styling solution relies on a cache, the sheets manager, to only inject the CSS once per component type (if you use two buttons, you only need the CSS of the button one time). You need to create a new sheets instance for each request.

Example of fix:

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">// Create a sheets instance.
</span><span class="token prefix deleted">-</span><span class="token line">const sheets = new ServerStyleSheets();
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">function handleRender(req, res) {
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  // Create a sheets instance.
</span><span class="token prefix inserted">+</span><span class="token line">  const sheets = new ServerStyleSheets();
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  //…
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  // Render the component to a string.
</span><span class="token prefix unchanged"> </span><span class="token line">  const html = ReactDOMServer.renderToString(</span></span>

[legacy] React class name hydration mismatch

There is a class name mismatch between the client and the server. It might work for the first request. Another symptom is that the styling changes between initial page load and the downloading of the client scripts.

Action to Take

The class names value relies on the concept of class name generator. The whole page needs to be rendered with a single generator. This generator needs to behave identically on the server and on the client. For instance:

You need to provide a new class name generator for each request. But you shouldn't share a createGenerateClassName() between different requests:

Example of fix:

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">// Create a new class name generator.
</span><span class="token prefix deleted">-</span><span class="token line">const generateClassName = createGenerateClassName();
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">function handleRender(req, res) {
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  // Create a new class name generator.
</span><span class="token prefix inserted">+</span><span class="token line">  const generateClassName = createGenerateClassName();
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  //…
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  // Render the component to a string.
</span><span class="token prefix unchanged"> </span><span class="token line">  const html = ReactDOMServer.renderToString(</span></span>

You need to verify that your client and server are running the exactly the same version of Material UI. It is possible that a mismatch of even minor versions can cause styling problems. To check version numbers, run npm list @mui/styles in the environment where you build your application and also in your deployment environment.

You can also ensure the same version in different environments by specifying a specific Material UI version in the dependencies of your package.json.

example of fix (package.json):

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> "dependencies": {
</span><span class="token prefix unchanged"> </span><span class="token line">   ...
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">   "@mui/styles": "^5.0.0",
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">   "@mui/styles": "5.0.0",
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   ...
</span><span class="token prefix unchanged"> </span><span class="token line"> },</span></span>

You need to make sure that the server and the client share the same process.env.NODE_ENV value.

Frequently Asked Questions

MUI is awesome. How can I support the company?

Why do the fixed positioned elements move when a modal is opened?

How can I disable the ripple effect globally?

How can I disable transitions globally?

Do I have to use Emotion to style my app?

When should I use inline-style vs. CSS?

How do I use react-router?

How can I access the DOM element?

My App doesn't render correctly on the server

Why are the colors I am seeing different from what I see here?

Why does component X require a DOM node in a prop instead of a ref object?

What's the clsx dependency for?

I cannot use components as selectors in the styled() utility. What should I do?

[legacy] I have several instances of styles on the page

Possible reasons

Duplicated module in node_modules

Running multiple applications on one page

[legacy] Why aren't my components rendering correctly in production builds?

[legacy] CSS works only on first load and goes missing

Action to Take

[legacy] React class name hydration mismatch

Action to Take