Material-UI со стилями, не применяющими цвет фона

Question

Я использовал withStyles для применения фонового линейного градиента (в пределах объекта container в styles), и это работало нормально, но я следовал тому же формату, чтобы создать другой объект в styles с именем child, чтобы применитьЦвет фона для дочернего компонента, но ничего не произошло.Почему не применяется цвет фона?

import { Grid } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';

const styles = {
  container: {
    display: 'flex',
    alignItems: 'center',
    height: '100vh',
    background: 'linear-gradient(45deg, #aa6775 30%, #984355 90%)' // Works
  },

  child: {
    backgroundColor: 'yellow' // Does nothing
  }
};

class App extends Component {

  render() {
    return (
      <Grid
        id="quote-box"
        className={this.props.classes.container}
        justify="center"
        container
      >
        <Grid xs={11} lg={8} className={this.props.classes.child} item>
          .....
        </Grid>
      </Grid>
    );
  }
}

export default withStyles(styles)(App);

Answer 1

Я создал проект с помощью Create React App и запустил ваш код, и он, кажется, работает нормально.Возможно, вы используете более старую версию Material?

Для справки вот мои зависимости:

"dependencies": {
    "@material-ui/core": "^4.2.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },