【MUI】【CSS】自作コンポーネントに固定のCSSを与えつつ、場合によって＋αのCSSを当てたい時の書き方。

シチュエーション

「MUIを利用した自作のコンポーネント、backgroundColorを青色にするCSSだけで基本的には良いんだけど、場所によっては青以外の別の色に変更したり、他のCSSも当てたいんだよな〜」って時のやり方です。

SampleComponent.tsx

import React from 'react';
import { Box, Typography } from '@mui/material';

const SampleComponent = ({ sx = {}, ...props }) => {
  // デフォルトのスタイル
  const defaultStyles = {
    backgroundColor: 'blue',
  };

  return (
    <Box sx={{ ...defaultStyles, ...sx }} {...props}>
      <Typography variant="h6">This is a sample component</Typography>
    </Box>
  );
};

export default SampleComponent;

ポイント

1.プロップスでsxを受け取る
※ちなみに型を定義する際は「?」でオプショナルにする。

const SampleComponent = ({ sx = {}, ...props }) => {}

2.デフォルトのスタイルを用意
コンポーネントを使う側は、sxプロップスを指定しなければdefaultStylesに定義したCSSだけが適用されます。

  // デフォルトのスタイル
  const defaultStyles = {
    backgroundColor: 'blue',
  };

3.スプレッド構文でオブジェクトマージ

<Box sx={{ ...defaultStyles, ...sx }}

一番のポイントです。
オブジェクトマージによって最終的に一つのオブジェクトをsx属性に当てます。
ちなみにプロップスのsxにbackgroundColorを赤色で指定すれば、最終的に赤色になります。
オブジェクトマージは同一のプロパティが存在する場合は右側のプロパティの値で上書きされる為です。

さいごに

今回のやり方はMUIのsxでなくても、divのような純粋なHTMLのstyle属性にも同じことが出来ます。
常にCSSをプロップスを受け取るだけではなく、共通化できそうなCSSがあればデフォルトのCSSを当ててコードの重複を減らすことを意識していきましょう！