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: <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c62637869216d7c7c21616d78697e656d602179654c3c223d223c">[email protected]</a>
npm ERR! Found: <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17657276746357262f39273927">[email protected]</a>
npm ERR! node_modules/react
npm ERR!   <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f98b9c989a8db9">[email protected]</a>"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a180f0b091e2a">[email protected]</a>"^17.0.0" from @mui/<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdbeb9b4a1a8be8df8e3fbe3fd">[email protected]</a>
npm ERR! node_modules/@mui/styles
npm ERR!   @mui/<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5d6d1dcc9c0d6e5">[email protected]</a>"*" 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:_logs2022-04-08T15_14_10_234Z-debug-0.log

what should I do to customize my design?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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.

Method 2

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>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0