reactjsmaterial-uimakestyles

Material UI makeStyles not changing the css properties of all elements

I've copied this exact chunk of code from the documentation after installing npm install @mui/styles:

import * as React from 'react';
import { makeStyles } from '@mui/styles';
import Button from '@mui/material/Button';

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

On my local machine it seems to ignore the color white property, border property as well as the box shadow. Is there a reason for this? I've confirmed in my package.json that im runing mui-material/styles 5.2.3

Solution

  • i believe this will answer your question. Because makeStyles is deprecated in MUI V5.

    You can always use sx prop to add custom themes.

    I had the same issue and this article on dev saved me.