`makeStyles` with a function css rule entry doesn't work on react 18 using react-dom/client createRoot
See original GitHub issueDuplicates
- 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:
- Create a new react app with the lates CRA (e.g.
yarn create react-app make-styles-test
) - Use makeStyles and define a rule using a function callback instead of a plain object
- 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
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:8 (8 by maintainers)
Top GitHub Comments
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 usestyled()
,sx
etc, or migrate totss-react
which has an API which is closer to@mui/styles
. I hope this expalantion helps other who may come to this issue.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
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.
I woudn’t count to much on it. Ref.
Good luck!