how customize style materail UI v5-CodePudding

I am trying to customize MUI to that import makeStyles

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

I get this error when try install npm install @mui/styles

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
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/[email protected]
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:_logs\2022-04-08T15_14_10_234Z-debug-0.log

what should I do to customize my design?

CodePudding user response：

That part of the MUI v5 library is legacy and not compatible with React 18:

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

From docs: https://mui.com/styles/basics/

The makeStyles API is not where the MUI team wants to take the product. The new v5 approach is more component based, using styled components as well as utility-based with the sx prop.

CodePudding user response：

just can use styled components

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

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

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

<SubmitButton {/* After */}
  variant="contained"
  color="secondary"
  type="submit"
  endIcon={<KeyboardArrowRight />}
>
  Submit
</SubmitButton>