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
1.8 KiB
1.8 KiB
Installation
Install MUI System, a collection of CSS utilities for rapidly laying out custom designs.
Default installation
Run one of the following commands to add MUI System to your project:
npm install @mui/system @emotion/react @emotion/styled
pnpm add @mui/system @emotion/react @emotion/styled
yarn add @mui/system @emotion/react @emotion/styled
Peer dependencies
Please note that react is a peer dependency, meaning you should ensure it is installed before installing MUI System.
"peerDependencies": {
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
},
With styled-components
MUI System uses Emotion as its default styling engine. If you want to use styled-components instead, run one of the following commands:
npm install @mui/system @mui/styled-engine-sc styled-components
pnpm add @mui/system @mui/styled-engine-sc styled-components
yarn add @mui/system @mui/styled-engine-sc styled-components
:::error
As of late 2021, styled-components is not compatible with server-rendered Material UI projects.
This is because babel-plugin-styled-components isn't able to work with the styled() utility inside @mui packages.
See this GitHub issue for more details.
We strongly recommend using Emotion for SSR projects. :::