web-dev-qa-db-ja.com

`JSS`に` CSS`ネストされたルールを実装する方法は？

Material-UI または一般的にcssでJSS class-nestingを操作する方法を知りたいですか？
私は以下のように試みています。

    card: {
      cardHeader:{
         marginTop:"30px"
      }
    }
cssmaterial-uijss
5
Santhan Frankenstein

CSSを書くのと同じです（SCSSやSASSと混同しないでください）。 JSSはすべてのjsを純粋なCSSに変換し、ほとんどすべてのCSSプロパティがここでも機能するはずです。

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

これを指摘してくれた@ricovitchに感謝するためにプラグインをセットアップする必要があります。デフォルトの場合、これを確認できます jss-preset-default 。 reactには、デフォルトのプリセットが組み込まれている react-jss を使用するだけです。

9
Lalit Yadav

Material-UIには、ここに記載されているJSSプラグインのセットが含まれています： https://material-ui.com/customization/css-in-js/#plugins

これらのプラグインセットには、ネストされたルールを許可するjss-nestedがあります： http://cssinjs.org/jss-nested/

ただし、サンプルコードでは、ネストされたルールは実際には必要ありません。必要なのは「cardHeader」だけです。

4
Ricovitch

JSXの場合

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

使用できます：

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

ネストされたクラスをターゲットにすると、マテリアルUIコンポーネントでデフォルトのJSSスタイルをオーバーライドする場合に役立ちます。

2
user2811588