MUI: cannot apply background color to Paper component-CodePudding

I'm trying to style the MUI <Paper> component, however setting the background color isn't working. Following the online tutorials I'm applying the background-color CSS property to the root element of the Paper but the color remains white while other CSS properties - in this case padding and text-align work. Can someone please tell me what I am missing?

import React from 'react';  
import { Paper, Typography } from '@mui/material';
import { makeStyles } from '@mui/styles';
import AccessAlarmIcon from '@mui/icons-material/AccessAlarm';

const useStyles = makeStyles({
    root: {  
        textAlign: 'center',
        padding: 15,
        backgroundColor: '#37474f',
        }
    
});

export default function Header() {

    const classes = useStyles();

    return( 
        <Paper outlined square className={classes.root} 
        >
            <Typography variant="h2" component="h1"> 
                Pomodoro Cl
                <AccessAlarmIcon sx={{ fontSize: 45, color: 'red' }} />
                ck
            </Typography>
        </Paper>
    )
}

CodePudding user response：

First of all your attribute outlined is incorrect, it should bevariant="outlined" as per the documentation. For the background-color not working, you will need to add !important to the property so it takes precedence over mui's default styling. Here's a working codesandbox for you: https://codesandbox.io/s/strange-smoke-y6yhv?file=/src/App.tsx