Chapter 14無料公開

sxで例外的なCSS処理・部分的にグローバルなCSSを作る

terrierscript
terrierscript
2021.05.16に更新

sx propsについて

Chkra UIのstyled-systemにはsxという特殊なプロパティが用意されています。

https://chakra-ui.com/docs/features/the-sx-prop

インラインスタイルのようなもので、例えばまだChakra UIが対応してないプロパティを使いたい場合などに扱えます。[1]

例えばマイナーなbreak-insideなどを例にしてみましょう。

そのまま Chakra UIに記述すると、単純にDOMのプロパティになってしまいます。

<Box breakInside="avoid">xxx</Box>
// -> <div class="css-0" style="" breakinside="avoid">xxx</div>

これをsxで記述すると、下記のようにCSSを付与して排出してくれます。

<Box sx={{ breakInside: "avoid" }}>xxx</Box>

// -> <div class="css-1ybn7nl">xxx</div>
.css-1ybn7nl {
    break-inside: avoid;
}

ちなみにReactの標準的なstyle属性でも同様に可能ですが、CSS化されるかインラインスタイルとして展開されるかに違いがあります。

<Box style={{ breakInside: "avoid" }}>xxx</Box>

// -> <div class="css-0" style="break-inside: avoid;">xxx</div>

一部だけ別なグローバルCSSを扱う

また、sx propsは子要素のネストにも適用されます。
これを応用すると、例えばレガシーな環境の場合に部分的にグローバルにCSSを当てるなども可能になります

<Box sx={{
  a: {
    color: "blue"
  },
  ".my-some-class": {
    color: "green"
  }
}}>
  <a href="/">blue</a>
  <div className="my-some-class">green</div>
</Box>

ちなみに、レスポンシブの機能なども使えるので、下記のような記述も可能です

<Box sx={{
  ".my-some-class": {
    color: { base: "green", md: "red" }
  }
}}>
  <div className="my-some-class">responsive</div>
</Box>
脚注
  1. ちなみにこの機能はTheme UIなどにも見られるものです。 ↩︎