如何自定义样式材料 UI v5

Question

我正在尝试针对该导入自定义 MUI makeStyles

import { makeStyles } from '@mui/styles';

尝试安装时出现此错误 npm install @mui/styles

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: note-app-material-ui@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from @mui/styles@5.6.0
npm ERR! node_modules/@mui/styles
npm ERR!   @mui/styles@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:_logs22-04-08T15_14_10_234Z-debug-0.log

我应该如何定制我的设计？

Answer 1

MUI v5 库的那部分是遗留的，与 React 18 不兼容：

⚠️ @mui/styles is not compatible with React.StrictMode or React 18.

来自文档：https://mui.com/styles/basics/

makeStyles API 不是 MUI 团队想要将产品带到哪里。新的 v5 方法更加基于组件，使用 样式组件 以及 utility-based 和 sx 属性。

Answer 2

就可以用inline style或sx prop

import { styled } from '@mui/styles';
import Button from '@mui/material/Button';

const SubmitButton = {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    ...your style
};

<Button
  variant="contained"
  color="secondary"
  type="submit"
  endIcon={<KeyboardArrowRight />}
  style={SubmitButton }
>
  submit
</Button>

/*** OR ***/
/*** use sx prop ***/

<Button
  variant="contained"
  color="secondary"
  type="submit"
  endIcon={<KeyboardArrowRight />}
  sx={SubmitButton}
>
  submit
</Button>

如何自定义样式材料 UI v5

how customize style materail UI v5

reactjs

material-ui

styled-components