Material UI v5でのパレット色の変更・追加まとめ

MUIことMaterial UIがv5になり、色に関しても変更がされていますので、記事にしたいと思います。

デフォルトの色、色の変更方法、色の追加方法を解説していきます。

(記事の最後にコード全文を載せています。)

デフォルトで設定されている色

パレットにはあらかじめ色が用意されています。v4から色の変更もありました。

primary, secondary, error, warning, info, successがデフォルトで設定されています。

デフォルトのパレット情報はこちらから↓

色の変更

デフォルトの色は簡単に変更することが出来ます。

themeの設定で上書きするだけです。

const theme = createTheme({
  palette: {
    primary: {
      // 千歳緑
      main: '#316745',
    },
  },
});

primaryの色を変更しています。

変更した色に応じてlight, darkも自動で設定されるため、ボタンのホバーエフェクトも自動でいい感じの色に設定してくれます。

theme.palette.primary.darkで色を取得出来ます。

色の追加

色の追加も簡単になっています。createThemeでpaletteに新しい色のオブジェクトを追加するだけです。

const theme = createTheme({
  palette: {
    // 真紅
    shinku: {
      // light: '#d9333f',
      main: '#ad002d',
      // dark: '#a22041',
      contrastText: '#e9e4d4',
    },
  },
});

以下のように使うことが出来ます。

<Button variant='contained' color='shinku'>真紅</Button>

インターフェースは以下のようになっています。

interface PaletteColor {
  light?: string;
  main: string;
  dark?: string;
  contrastText?: string;
}

main, light, dark, contrastTextの4つを指定することができますが、mainだけを指定すればあとは任意です。

light, darkはpaletteのtonalOffsetをもとに自動で設定され、contrastTextもcontrastThresholdを元に自動で設定されるようです。

light,darkは設定されていない

今回のコード

create-react-app状態から不要なコードを抜き出し、@mui関連をインストールします。

以下はApp.jsの内容です。

import { ThemeProvider, createTheme, styled } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

const theme = createTheme({
  palette: {
    // 真紅
    shinku: {
      light: '#d9333f',
      main: '#ad002d',
      dark: '#a22041',
      contrastText: '#e9e4d4',
    },
    primary: {
      // 千歳緑
      main: '#316745',
    },
  },
});

const CustomButton = styled(Button)(({ theme }) => ({
  color: theme.palette.shinku.contrastText,
  backgroundColor: theme.palette.shinku.main,
  '&:hover': {
    backgroundColor: theme.palette.shinku.light,
  },
}));

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Box
        display='flex'
        height='100vh'
        justifyContent='center'
        alignItems='center'
        gap={1}
      >
        <Stack spacing={2}>
          <Button variant='contained'>primary</Button>
          <Button variant='contained' color='secondary'>
            secondary
          </Button>
          <Button variant='contained' color='error'>
            error
          </Button>
          <Button variant='contained' color='warning'>
            warning
          </Button>
          <Button variant='contained' color='info'>
            info
          </Button>
          <Button variant='contained' color='success'>
            success
          </Button>
          <Button variant='contained' color='shinku'>
            真紅
          </Button>
        </Stack>
        <Stack spacing={2}>
          <Button variant='outlined'>primary</Button>
          <Button variant='outlined' color='secondary'>
            secondary
          </Button>
          <Button variant='outlined' color='error'>
            error
          </Button>
          <Button variant='outlined' color='warning'>
            warning
          </Button>
          <Button variant='outlined' color='info'>
            info
          </Button>
          <Button variant='outlined' color='success'>
            success
          </Button>
          <Button variant='outlined' color='shinku'>
            custom color
          </Button>
        </Stack>
        <CustomButton variant='contained'>Styled Button</CustomButton>
      </Box>
    </ThemeProvider>
  );
}

export default App;

まとめ

この記事ではMUI v5の色の扱い、具体的には「デフォルトの色」、「色の変更方法」、「色の追加方法」を取り上げました。

色の変更、追加が簡単なので自分好みのパレットを簡単に作成できますね。

参考になれば幸いです。

以上。