'how customize style materail UI v5

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?

Solution 1:^[1]

just can use inline style or 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>

Solution 2:^[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Eric Crescioni

'how customize style materail UI v5

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]