如何在 mui useStyle 上添加背景颜色？

Question

I dont know what i am missing on this, or whats wrong on this code, but the background color is not reflecting, please help, thanks

import { makeStyles } from '@mui/styles';
const useStyles = makeStyles((theme) => ({
  root: {
    height: '-webkit-fill-available',
    margin: 0,
    paddingLeft: 30,
    background: 'rgba(239, 243, 246, 1)' //it doesnt work why?
  },
}));

const Homepage = () => {
  const classes = useStyles();

  return (
    <div className={classes.root} id="style">
      <h4>About this School</h4>
      <About />
    </div>
  );
};

Answer 1

Add comma at the end of background code.

  root: {
    height: '-webkit-fill-available',
    margin: 0,
    paddingLeft: 30,
    background: 'rgba(239, 243, 246, 1)',
  },

Answer 2

as @Prathamesh Koshti said it's working well in the latest version. just inspect the element and check whether the background color was overriding or not. working code here