Material-UI withStyles 不应用背景颜色答案

【问题标题】：Material-UI withStyles not applying background colorMaterial-UI withStyles 不应用背景颜色
【发布时间】：2019-07-11 02:53:43
【问题描述】：

我使用 withStyles 应用背景线性渐变（在 styles 中的 container 对象内）并且效果很好，但我遵循相同的格式在 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);

【问题讨论】：

标签： reactjs material-ui

【解决方案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"
  },

【讨论】：

嗯，这很奇怪。我正在使用相同的版本。无论如何，谢谢！
您是否检查了文档中其他位置是否有另一个 child 样式覆盖它？我还会检查检查器以查看正在应用的样式。
哦，是的，一定是这样。传入 Grid item 组件的组件用 Material-UI Card 组件包裹。