`makeStyles` with a function css rule entry doesn't work on react 18 using react-dom/client createRoot

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

On react 18, when rendering using ReactDomClient.createRoot().render(...), using function css rule definitions doesn’t work correctly — styles are missing from the runtime, despite the classes being applied to the elements.

Still on react 18, rendering via ReactDom.render does work.

const useStyles = makeStyles(() =>
  createStyles({
    // Function style rule: Doesn't work
    fnStyleClass: () => {
      return {
        color: "red",
        background: "black"
      };
    },
    // Plain object: Works
    objStyleClass: {
      color: "red",
      background: "black"
    }
  })
);

This is particularly problematic because this is the new default of create react app.

Expected behavior 🤔

Function style rules work and apply just like plain objects independently of the react render method used.

Steps to reproduce 🕹

Steps:

1. Create a new react app with the lates CRA (e.g. yarn create react-app make-styles-test)
2. Use makeStyles and define a rule using a function callback instead of a plain object
3. See styles aren’t applied during runtime

Live example @ https://codesandbox.io/s/mui-makestyles-functions-issue-jhjfq5

The example renders two Typography components; each with a class produced by a makeStyles({})(). One of the Typography elements takes a class for a style rule body returned by a function and the other from a plain object. The style rules are identical, the only difference is the plain object vs function definitions. When rendered via createRoot.render, you can see one of the Typography elements doesn’t have the styling that the class defines (black background, red font color).

Notice at the bottom of the index.tsx file the two ways of rendering (ReactDom.render vs ReactDomClient.createRoot.render). One works and the other one doesn’t. You may comment/uncomment the two ways to see the different results.

Context 🔦

We have an npm package with components based on mui. Despite our package being on mui@^5, a number of our components haven’t fully migrated out of the @mui/styles into the new style system. CRA latest uses createRoot().render() by default and, when creating a CRA app and using our package, a lot of our styles are simply missing.

The issue is not specific to our package (see clean codesandbox example).

Your environment 🌎

Chrome & Safari. Probably all.

  System:
    OS: macOS 12.4
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.0/bin/yarn
    npm: 8.1.4 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Edge: Not Found
    Firefox: 99.0
    Safari: 15.5
  npmPackages:
    @emotion/react: ^11.5.0 => 11.9.0 
    @emotion/styled: ^11.3.0 => 11.8.1 
    @mui/base:  5.0.0-alpha.82 
    @mui/icons-material: ^5.3.0 => 5.3.0 
    @mui/lab: ^5.0.0-alpha.65 => 5.0.0-alpha.83 
    @mui/material: ^5.3.0 => 5.8.1 
    @mui/private-theming:  5.8.0 
    @mui/styled-engine:  5.8.0 
    @mui/styles: ^5.3.0 => 5.8.0 
    @mui/system:  5.8.1 
    @mui/types:  7.1.3 
    @mui/utils:  5.8.0 
    @mui/x-data-grid:  5.11.1 
    @mui/x-date-pickers:  5.0.0-alpha.1 
    @types/react: ^18.0.0 => 18.0.9 
    react: ^18.1.0 => 18.1.0 
    react-dom: ^18.1.0 => 18.1.0 
    typescript: ^4.4.2 => 4.6.4 

[mnajdova]

The @mui/styles package is not compatible with React 18, as shown in the documentation - https://mui.com/system/styles/basics/ You should migrate to either @mui/system and use styled(), sx etc, or migrate to tss-react which has an API which is closer to @mui/styles. I hope this expalantion helps other who may come to this issue.

[garronej]

It also doesn’t seem to remove the createStyles call and I get some additional compilation errors that I need to inspect further to understand.

I didn’t write the codemod but there is at least one test case that does remove createStyle.
https://github.com/mui/material-ui/pull/31802/files#diff-b13e5553c5f57f8e729ca91e76b03e68e84e04bb15d2723ea928a735c0b826bb

@mui/styles/makeStyles and not from @material-ui/styles/makeStyles like the codemod expects

If it’s only that you could try a search/replace and run the codemod again.

Anyway, the migration is quite easy to perform by hand on a typescript codebase, assuming it isn’t huge.

Also, being @mui/styles deprecated I assume it means this ticket won’t get fixed?

I woudn’t count to much on it. Ref.

Good luck!