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

Posted 2023-02-22

【中文标题】如何在`JSS`中实现`CSS`嵌套规则？

【英文标题】：How to implement `CSS` nested rules in `JSS`?

【发布时间】：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 样式，则定位嵌套类会很有帮助。

【讨论】：

像'&-postfix' 这样的规则怎么样？引用它的唯一方法是使用`$classes.card-postfix`。这是正确的方法吗？

【参考方案2】：

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

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

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

【讨论】：

如果不配置jss-nested插件这个是不行的

已将其与 github.com/cssinjs/react-jss 一起使用，它是开箱即用的

感谢您的帮助！为我工作

【参考方案3】：

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

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

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