how customize style materail UI v5

Question

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: 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:_logs\2022-04-08T15_14_10_234Z-debug-0.log

what should I do to customize my design?

Answer 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>