title: Material-UI applying backgroundColor does not work
body: <p>I have this code to apply the backgroundColor for my grid and it was working until today... It was black and now it just becomes white and I can't change the background color of the root element.</p>
  
  <p>Is there any code that can overwrite this? </p>
  
  <p>I got the code from here </p>
  
  <p><a href="https://github.com/mui-org/material-ui/blob/master/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js" rel="nofollow noreferrer">https://github.com/mui-org/material-ui/blob/master/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js</a></p>
  
  <pre><code>const useStyles = makeStyles(theme =&gt; ({
    root: {
      height: '100%',
      width: '100%',
      backgroundColor: 'black'
    },
  
   &lt;Grid container component='main' className={classes.root}&gt;
  </code></pre>
  
  <p>// full code</p>
  
  <pre><code>import React, { useState } from 'react';
  import { connect } from 'react-redux';
  
  import history from '../../../history';
  import { requestSignIn } from '../../../store/actions';
  // import { Button, Container, Row, Col, FormControl, Dropdown } from 'react-bootstrap'
  
  import Button from '@material-ui/core/Button';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import TextField from '@material-ui/core/TextField';
  import FormControlLabel from '@material-ui/core/FormControlLabel';
  import Checkbox from '@material-ui/core/Checkbox';
  import Link from '@material-ui/core/Link';
  import Paper from '@material-ui/core/Paper';
  import Box from '@material-ui/core/Box';
  import Grid from '@material-ui/core/Grid';
  import Typography from '@material-ui/core/Typography';
  import { makeStyles } from '@material-ui/core/styles';
  
  import Logo from '../../../../public/images/ic-logo-dark.png';
  
  
  const useStyles = makeStyles(theme =&gt; ({
    root: {
      height: '100%',
      width: '100%',
      backgroundColor: 'black'
    },
    image: {
      backgroundImage:
        'url(https://media.giphy.com/media/kz76j0UjtPoE4WyhQn/giphy.gif)',
      backgroundRepeat: 'no-repeat',
      backgroundSize: 'cover',
      backgroundPosition: 'center'
    },
    paper: {
      margin: theme.spacing(8, 4),
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center'
    },
    avatar: {
      margin: theme.spacing(1)
    },
    form: {
      width: '100%', // Fix IE 11 issue.
      marginTop: theme.spacing(1),
      color: 'orange'
    },
    submit: {
      margin: theme.spacing(3, 0, 2)
    }
  }));
  
  function Login() {
  
    const classes = useStyles();
    const [inputs, setInputs] = useState({
      login: '',
      password: ''
    })
    const [keepLogged, setKeepLogged] = useState(false)
  
    const { login, password } = inputs
  
    function handleChange(e) {
      e.preventDefault();
      const { name, value } = e.target;
      setInputs(inputs =&gt; ({ ...inputs, [name]: value }));
      console.log(`${login}`)
    }
  
    const loginUser = () =&gt; {
      const { login, password } = this.inputs;
      const { requestSignIn } = this.props;
  
      requestSignIn({ login, password });
    };
  
    return (
      &lt;Grid container component='main' className={classes.root}&gt;
        &lt;CssBaseline /&gt;
        &lt;Grid item xs={false} sm={4} md={7} className={classes.image} /&gt;
        &lt;Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square&gt;
          &lt;div className={classes.paper}&gt;
            &lt;div&gt;
              &lt;img src={Logo} style={{ width: 300 }} /&gt;
            &lt;/div&gt;
            &lt;Typography component='h1' variant='h5'&gt;
              Sign in
            &lt;/Typography&gt;
            &lt;form className={classes.form} noValidate&gt;
              &lt;TextField
                variant='outlined'
                margin='normal'
                required
                fullWidth
                id='email'
                label='Email Address'
                value={login}
                onChange={e =&gt; handleChange(e)}
                name='login'
                autoComplete='email'
                autoFocus
              /&gt;
              &lt;TextField
                variant='outlined'
                margin='normal'
                required
                fullWidth
                name='password'
                label='Password'
                value={password}
                onChange={e =&gt; handleChange(e)}
                type='password'
                id='password'
                autoComplete='current-password'
              /&gt;
              &lt;FormControlLabel
                control={&lt;Checkbox value='remember' color='primary' /&gt;}
                label='Remember me'
              /&gt;
              &lt;Button
                type='submit'
                fullWidth
                variant='contained'
                color='primary'
                value='Log In'
                className={classes.submit}
                onClick={() =&gt; this.loginUser}
              &gt;
                Sign In 
              &lt;/Button&gt;
              &lt;Grid container&gt;
                &lt;Grid item xs&gt;
                  &lt;Link href='#' variant='body2'&gt;
                    Forgot password?
                  &lt;/Link&gt;
                &lt;/Grid&gt;
                &lt;Grid item&gt;
                  &lt;Link
                    variant='body2'
                    onClick={() =&gt; history.push('/registration')}
                  &gt;
                    {"Don't have an account? Sign Up"}
                  &lt;/Link&gt;
                &lt;/Grid&gt;
              &lt;/Grid&gt;
              &lt;Box mt={5}&gt;
                &lt;Copyright /&gt;
              &lt;/Box&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
    );
  }
  
  const mapDispatchToProps = dispatch =&gt; ({
    requestSignIn: data =&gt; dispatch(requestSignIn(data))
  });
  
  export default connect(null, mapDispatchToProps)(Login);
  </code></pre>