Skip to content

Commit

Permalink
update content
Browse files Browse the repository at this point in the history
  • Loading branch information
siriwatknp committed Apr 26, 2023
1 parent b1aab41 commit 8c2ed33
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,10 @@ 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.

## Making sure you're on the right version of MUI
These changes have been added as recently as April 2023, so be sure you're running MUI v5.12.0 or higher.
## 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

Expand Down
8 changes: 5 additions & 3 deletions docs/data/material/guides/styled-engine/styled-engine.md
Original file line number Diff line number Diff line change
Expand Up @@ -120,9 +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.

These changes have been added as recently as April 2023, so be sure you're running MUI v5.12.0 or higher.
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';
Expand All @@ -143,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.
Expand Down

0 comments on commit 8c2ed33

Please sign in to comment.