Material UI Ver.5の「sx prop」でスタイル調整が便利になった!

プログラミング

現在、React開発で使用しているMaterial UI。9月の半ばにバージョンが4から5にアップしました。

そこで新たに「sx prop」というものが追加されたのですが、これが鬼便利で使わずにはいられません!

sx propとは?

sx propのドキュメントは以下にあります。

The sx prop - MUI
The `sx` prop is a shortcut for defining custom style that has access to the theme.

sx prop は、簡単に言うと、タグの style prop を拡張したようなもので、主に以下のような特徴があります。

  1. theme に直接アクセスしてスタイルが使える。
  2. エイリアスが使える。

それぞれ見ていきましょう。

theme に直接アクセスしてスタイルが使える

ルートに<ThemeProvider theme={theme}>というものを使ってコンテンツ部分を囲んでいるのですが、こうすることでthemeを下層のコンポーネントに渡しています。この方法はRouterやReduxと同じですね。

themeにはMaterial UIのデフォルトのスタイルが入っていて、以前のバージョンではmakeStyleの引数にthemeを入れることでthemeのスタイルを使えました。

しかし、Material UIの各コンポーネント(BoxやGridなど)ではthemeを使えなかったため、やむなくstyle={{ backgroundColor: “blue” }}のような指定が必要でした。

今回登場したsx propはそんな状況を一変させ、各コンポーネントでもthemeを参照できるようになったのです!百聞は一見に如かず、ということでコード例を見てみましょう。

export default function Example() {
  return (
    <ThemeProvider theme={theme}>
       <Box sx={{ color: 'text.primary', fontSize: 34, fontWeight: 'medium' }}>
         98.3 K
       </Box>
     </ThemeProvider>
  );
}

上記のreturnの後で<ThemeProvider theme={theme}>を使っていることが分かります。その後の<Box>でsx propが使われているのですが、color: ‘text.primary’となっているのが分かります。

そうです!ここでthemeのスタイルを使っているんです。超簡単ですね!

しかも、これまでthemeスタイルを使うときは、color: ‘theme.palette.text.primary’のようにしないといけなかったんですが、sx propでは、’theme.palette’を省略できています。いやー、便利ですね。

エイリアスが使える

Material UI で定義されたエイリアスを使ってスタイルを定義できるということです。エイリアスを使うことでより短いコードでスタイリングできます。やっぱり短くて分かりやすいコードが綺麗なコードですからね。

例のごとく例をみてみましょう。

export default function Example() {
  return (
    <ThemeProvider theme={theme}>
        <Box
          sx={{
            bgcolor: 'success.dark',
            mx: 0.5,
          }}
        >
          +18.77%
        </Box>
     </ThemeProvider>
  );
}

<Box>の箇所をみてみると、何やらbgcolorやmxといったものがあります。これがエイリアスで以下を意味しています。

bgcolor: backgroundColor

mx: margin-left, margin-right

これを使うことで、早くコーディングして見やすいコードが書けます。そういえば、Bootstrapにもmxとかありましたね。Bootstrapを使ったことがある方はすぐに慣れると思います。いやはや、もうどんどん使いたくてウズウズします。笑

パフォーマンスには注意

ただ、sx propを使うときの注意点として、パフォーマンスが低下するという点が公式ドキュメントで書かれています。

MUI System - MUI
CSS utilities for rapidly laying out custom designs.
Benchmark caseCode snippetTime normalized
a. Render 1,000 primitives<div className="…">100ms
b. Render 1,000 components<Div>120ms
c. Render 1,000 styled components<StyledDiv>160ms
d. Render 1,000 Box<Box sx={…}>370ms

styledコンポーネントを使うよりも2倍以上も表示に時間がかかっていて、パフォーマンスが悪いです。

ですので、便利だからといって何でもかんでもsx propを使ってしまうと、使う量に伴ってパフォーマンスが落ちてしまうということですね。

使い所としては、レイアウトの調整、一つだけスタイルを当てる、などちょっとしたスタイリングになるかと思います。まあ、いろんな箇所で使うコンポーネントなら、必然的にstyledコンポーネントなどを使うと思いますので、あまり気にしなくても良いかもです。

今回のバージョンアップで追加されたsx propをうまく使って開発を効率的に進めていきましょうー!

コメント

タイトルとURLをコピーしました