diff --git a/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui.md b/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui.md index b781c0bf41ecb1..8811fb0cc4c0c6 100644 --- a/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui.md +++ b/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui.md @@ -18,6 +18,11 @@ Additionally, keep these in mind when using them together: - Both of them use [MUI System](/system/getting-started/overview/) as their style engine, which uses React context for theming. - Theme scoping must be done on one of the libraries. +## Prerequisite + +- Have `@mui/material` and `@mui/joy` installed in your project. +- The version of both libraries must be [v5.12.0](https://github.com/mui/material-ui/releases/tag/v5.12.0) or higher. + ## Set up the providers Render Material UI's `CssVarsProvider` inside Joy UI's provider and use `THEME_ID` to separate the themes from each other. diff --git a/docs/data/material/guides/styled-engine/styled-engine.md b/docs/data/material/guides/styled-engine/styled-engine.md index c44955958339d9..828d5dde04fdf2 100644 --- a/docs/data/material/guides/styled-engine/styled-engine.md +++ b/docs/data/material/guides/styled-engine/styled-engine.md @@ -120,7 +120,7 @@ This package-swap approach is identical to the replacement of React with [Preact Having more than one styling libraries could introduce unnecessary complexity to your project. You should have a very good reason to do this. ::: -Material UI can coexist with other libraries that depend on emotion or styled-components. To do that, render Material UI's `ThemeProvider` as an inner provider and use the `THEME_ID` to store the theme. +Material UI, starting from [v5.12.0](https://github.com/mui/material-ui/releases/tag/v5.12.0), can coexist with other libraries that depend on emotion or styled-components. To do that, render Material UI's `ThemeProvider` as an inner provider and use the `THEME_ID` to store the theme. ```js import { ThemeProvider, THEME_ID, createTheme } from '@mui/material/styles'; @@ -141,6 +141,10 @@ function App() { The theme of Material UI will be separated from the other library, so when you use APIs such as `styled`, `sx` prop, and `useTheme`, you will be able to access Material UI's theme like you normally would. +### Minimum version + +[Theme scoping](https://github.com/mui/material-ui/pull/36664) has been added to Material UI v5.12.0, so be sure you're running at that version or higher. + ### Using with [Theme UI](https://theme-ui.com/) Render Material UI's theme provider below Theme UI's provider and assign the material theme to the `THEME_ID` property.