css - 如何在`JSS`中实现`CSS`嵌套规则？

Question

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

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

Answer 1

对于像 JSX

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

您可以使用：

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

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

Answer 2

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

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

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

Answer 3

Material-UI 包括一组 JSS 插件记录在这里：https ://material-ui.com/customization/css-in-js/#plugins

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

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