【React】Material UI(MUI)の「sx prop」とは？書き方や使い方を解説！

import { Box } from '@mui/material';

function App() {
  return (
    <Box sx={{ backgroundColor: 'skyblue', padding: 2 }}>
      これはBoxの中身です
    </Box>
  );
}

export default App;

import { Box } from '@mui/material';

function App() {
  return (
    <div style={{ display: 'flex', gap: '20px' }}>
      {/* sx prop を使用した Box コンポーネント */}
      <Box
        sx={{
          width: 150,
          height: 100,
          bgcolor: 'primary.main', // テーマの色（theme.palette.primary.main）を参照
          color: 'white',
          p: 2, // padding: theme.spacing(2)（通常は16px）として解釈される
          '&:hover': {
            bgcolor: 'primary.dark', // ホバー時のスタイルを指定できる（擬似要素対応）
          },
          fontSize: {
            // 画面サイズごとのレスポンシブ指定が可能
            xs: '0.8rem', // 画面幅が xs のとき
            sm: '1rem', // sm のとき
            md: '1.2rem', // md のとき
          },
        }}
      >
        sx prop
      </Box>

      {/* style 属性を使用した div 要素 */}
      <div
        style={{
          width: 150,
          height: 100,
          backgroundColor: '#1976d2', // テーマとは関係ない固定色
          color: 'white',
          padding: '16px', // px単位の静的指定。テーマの spacing に連動しない
          fontSize: '1rem', // 固定サイズで、画面サイズによる変化はできない
          // :hover などの擬似要素は style 属性では記述できない
        }}
      >
        style属性
      </div>
    </div>
  );
}

export default App;

import { Box } from '@mui/material';

function App() {
  return (
    <Box
      sx={{
        width: 300,
        height: 100,
        bgcolor: 'primary.main',
        color: 'white',
        p: 2,
        border: 1,
        borderColor: 'secondary.light',
        boxShadow: 1,
        borderRadius: 2,
      }}
    >
      スタイリングされたBox
    </Box>
  );
}

export default App;

<Box
  sx={{
    color: 'primary.main', // theme.palette.primary.main を参照
    bgcolor: 'grey.100', // theme.palette.grey[100] を参照
    p: 2, // padding: theme.spacing(2)（通常は16px）
    borderRadius: 1, // theme.shape.borderRadius（通常4px）
    fontSize: '1rem',
    lineHeight: 1.5,
    fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
  }}
>
  オブジェクト形式のBox
</Box>

<Box
  sx={(theme) => ({
    color: theme.palette.primary.main,
    backgroundColor: theme.palette.grey[100],
    padding: theme.spacing(2), // spacing単位に変換（16px）
    borderRadius: theme.shape.borderRadius, // デフォルトは4px
    fontSize: theme.typography.body1.fontSize,
    lineHeight: theme.typography.body1.lineHeight,
    fontFamily: theme.typography.body1.fontFamily,
  })}
>
  関数形式（パレット・spacing）のBox
</Box>

<Box
  sx={(theme) => ({
    color: theme.palette.primary.main,
    backgroundColor: theme.palette.grey[100],
    padding: theme.spacing(2),
    borderRadius: theme.shape.borderRadius,
    ...theme.typography.body1,
  })}
>
  関数形式（typography適用）のBox
</Box>

<Box
  sx={{
    fontSize: {
      xs: '0.8rem', // スマホなどの狭い画面（最小サイズ）
      sm: '1rem', // タブレット程度の画面幅
      md: '1.2rem', // ノートPCやデスクトップ
    },
  }}
>
  レスポンシブ対応のテキスト
</Box>

<Box
  sx={[
    { color: 'red' }, // ベースのスタイル
    true && { fontWeight: 'bold' }, // 条件付きで追加されるスタイル
    (theme) => ({
      '&:hover': {
        backgroundColor: theme.palette.grey[200], // ホバー時のスタイル（関数形式）
      },
    }),
  ]}
>
  配列による複数スタイルの切り替え
</Box>

import { Box } from '@mui/material';

function createBoxStyle(color, paddingUnit) {
  return {
    bgcolor: color,
    p: paddingUnit,
    borderRadius: 2,
    '&:hover': {
      bgcolor: 'secondary.main',
    },
  };
}

function App() {
  return (
    <Box sx={createBoxStyle('primary.main', 2)}>
      関数で生成されたsxスタイル
    </Box>
  );
}

export default App;

const style = { flexDirection: 'column' };
<Box sx={style} /> // エラーになることがある

const style = { flexDirection: 'column' } as const;
<Box sx={style} />

<Box sx={{ flexDirection: 'column' }} />