如何在`JSS`中实现`CSS`嵌套规则？答案

【问题标题】：How to implement `CSS` nested rules in `JSS`?如何在`JSS`中实现`CSS`嵌套规则？
【发布时间】：2019-01-10 07:02:51
【问题描述】：

我想知道如何在Material-UI 或JSS 中使用css 类嵌套？
我正在尝试如下。

    card: {
      cardHeader:{
         marginTop:"30px"
      }
    }

【问题讨论】：

【解决方案1】：

对于 JSX 之类的

<div className={classes.card}>
  <div className={classes.cardHeader}></div>
</div>

你可以使用：

card: {
  '& $cardHeader': {
      marginTop: 30,
  }
}

如果您覆盖 Material UI 组件中的默认 JSS 样式，则定位嵌套类会很有帮助。

【讨论】：

【解决方案2】：

这与编写 CSS 相同（不要与 SCSS 或 SASS 混淆）。 JSS 将所有 js 转换为纯 CSS 几乎所有 CSS 属性都应该在这里工作。

card: {
 '& .cardHeader': {
   marginTop: 30 // px is default
 }
}

您需要为此设置插件，感谢@ricovitch 指出这一点。默认情况下，您可以检查 thisjss-preset-default。对于反应，您可以简单地使用具有内置默认预设的react-jss。

【讨论】：

【解决方案3】：

在这些插件集中有 jss-nested 允许嵌套规则：http://cssinjs.org/jss-nested/

但在您的示例代码中实际上不需要嵌套规则，因为您只需要一个：“cardHeader”

【讨论】：