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

Question

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

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

Answer 1

对于 JSX 之类的

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

您可以使用：

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

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

Answer 2

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

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

You will need to setup up plugins for this thanks @ricovitch for pointing out this. For default you can check thisjss-preset-default. For react you can simply use react-jss which has built-in default presets.

Answer 3

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

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

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