005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
96 lines
2.9 KiB
Markdown
96 lines
2.9 KiB
Markdown
# Theme scoping
|
||
|
||
<p class="description">Learn how to use multiple styling solutions in a single Material UI app.</p>
|
||
|
||
:::warning
|
||
Having more than one styling library can introduce unnecessary complexity to your project.
|
||
You should have a very good reason to do this.
|
||
:::
|
||
|
||
Starting with [v5.12.0](https://github.com/mui/material-ui/releases/tag/v5.12.0), Material UI can coexist with other component libraries that depend on Emotion or styled-components—this is possible thanks to _theme scoping_.
|
||
|
||
To do this, you need to render Material UI's `ThemeProvider` as an inner provider and use the `THEME_ID` to store the theme, as shown below:
|
||
|
||
```js
|
||
import { ThemeProvider, THEME_ID, createTheme } from '@mui/material/styles';
|
||
import { AnotherThemeProvider } from 'another-ui-library';
|
||
|
||
const materialTheme = createTheme(/* your theme */);
|
||
|
||
function App() {
|
||
return (
|
||
<AnotherThemeProvider>
|
||
<ThemeProvider theme={{ [THEME_ID]: materialTheme }}>
|
||
{/* components from another library and Material UI */}
|
||
</ThemeProvider>
|
||
</AnotherThemeProvider>
|
||
);
|
||
}
|
||
```
|
||
|
||
The Material UI theme will be separated from the other library, so when you use APIs such as `styled`, the `sx` prop, and `useTheme`, you'll be able to access Material UI's theme like you normally would.
|
||
|
||
## Minimum version
|
||
|
||
[Theme scoping](https://github.com/mui/material-ui/pull/36664) was introduced in Material UI v5.12.0, so make sure you're running that version or higher.
|
||
|
||
### Using with Theme UI
|
||
|
||
Render Material UI's theme provider below Theme UI's provider and assign the `materialTheme` to the `THEME_ID` property:
|
||
|
||
```js
|
||
import { ThemeUIProvider } from 'theme-ui';
|
||
import { createTheme as materialCreateTheme, THEME_ID } from '@mui/material/styles';
|
||
|
||
const themeUITheme = {
|
||
fonts: {
|
||
body: 'system-ui, sans-serif',
|
||
heading: '"Avenir Next", sans-serif',
|
||
monospace: 'Menlo, monospace',
|
||
},
|
||
colors: {
|
||
text: '#000',
|
||
background: '#fff',
|
||
primary: '#33e',
|
||
},
|
||
};
|
||
|
||
const materialTheme = materialCreateTheme();
|
||
|
||
function App() {
|
||
return (
|
||
<ThemeUIProvider theme={themeUITheme}>
|
||
<MaterialThemeProvider theme={{ [THEME_ID]: materialTheme }}>
|
||
Theme UI components and Material UI components
|
||
</MaterialThemeProvider>
|
||
</ThemeUIProvider>
|
||
);
|
||
}
|
||
```
|
||
|
||
### Using with Chakra UI
|
||
|
||
Render Material UI's theme provider below Chakra UI's provider and assign the `materialTheme` to the `THEME_ID` property:
|
||
|
||
```js
|
||
import { ChakraProvider, extendTheme as chakraExtendTheme } from '@chakra-ui/react';
|
||
import {
|
||
ThemeProvider as MaterialThemeProvider,
|
||
createTheme as muiCreateTheme,
|
||
THEME_ID,
|
||
} from '@mui/material/styles';
|
||
|
||
const chakraTheme = chakraExtendTheme();
|
||
const materialTheme = muiCreateTheme();
|
||
|
||
function App() {
|
||
return (
|
||
<ChakraProvider theme={chakraTheme} resetCSS>
|
||
<MaterialThemeProvider theme={{ [THEME_ID]: materialTheme }}>
|
||
Chakra UI components and Material UI components
|
||
</MaterialThemeProvider>
|
||
</ChakraProvider>
|
||
);
|
||
}
|
||
```
|