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

Question

我想知道如何在材料ui或一般的Jss中使用CSS组合器？我正在尝试如下。

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-jss。

Answer 3

Material-UI包含一组在此处记录的JSS插件：https://material-ui.com/customization/css-in-js/#plugins

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

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