📚

【MUI】sxとstyleの違い

2024/02/14に公開

React

JSX

mui

tech

TLDR

動的スタイル（変数に基づいて変化するスタイル）はstyle propに配置する
静的スタイルはsx propに配置する
sxのメリットはMUIテーマに基づいたスタイリングが可能なこと

sx

クラスを定義してスタイルを適用している。head以下にstyleタグがいっぱいある。

まだ一度も生成されていないスタイルの場合は新しいクラスを作る。

例えば

function CustomComponent() {
  const [computedHeight, setComputedHeight] = useState();

  useEffect(() => {
    window.addEventListener("resize", () =>
      setComputedHeight(Math.floor(Math.random() * 5)) // 1
      // setComputedHeight(window.innerWidth / 2)  // 2
    );
  }, []);

  return (
    <>
      <Box sx={{ height: computedHeight, width: "25px" }} />
    </>
  );
}

上記のコードではBoxのheightをウィンドウのリサイズをトリガーにして動的に変更している。

useEffect内の1のコードでは0~4の整数をランダムにheightとする。そのため生成されるstyleタグは最大で5つとなる。仮に3が2度目にheightに設定されても、新しいstyleタグは生成されず、すでに生成されたstyleを使いまわす。

一方、2のコードではウィンドウ幅を2で割った値をheightとしていて、なりうる値には膨大なパターンがある。そして、styleタグはその全パターンに対して生成される。

style

インラインでスタイルを適用する。
動的にスタイルを編集しても、常にスタイルの定義は１つ。
sxの時みたいに膨大な数のクラスが生成されたりしない。

間違ってたらコメントください😖

TLDR

sx

style

Discussion