🕌

Material-UIを使って全体のスタイリング(カラー等)を変更する方法

2021/08/22に公開

React

Material-UI

theme

tech

Material-UIのthemeをカスタマイズする

私はいつもブラウザの拡張機能を使ってダークモードにしているので、あまり配色にはこだわっていなかったのですがUI向上のため、少し配色を気にしてみることにしました。

CSSのフレームワークは色々ありますが、まずは王道のMaterial-UIを使っていこうかと思います。

色の変え方としてはmakestylesを使用したり、何パターンか変え方はありますが、全体のテーマを変更して統一感を持たせたいなと思って、themeをいじる方法に行き着きました。

デフォルトの状態

背景色とボタンはこんな感じです

通常の設定で使用するとこんな感じになります。

全体の背景色・ボタンの色とテキストカラー・入力文字の色を変更する

いい感じに変わりましたね！

まずはsrc/theme/theme.tsを用意します。

src/theme/theme.ts

import { createTheme } from '@material-ui/core/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#009688',
      contrastText: '#795548',
    },
    background: {
      default: '#bdbdbd',
    },
    text: { primary: '#ff9800' },
  },
});

export default theme;

このテーマを全体に適用させます。

src/App.tsx

import React from 'react';
import Button from '@material-ui/core/Button';
import './App.css';
import { ThemeProvider } from '@material-ui/core';
import theme from './theme/theme';
import CssBaseline from '@material-ui/core/CssBaseline';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      //中央寄せするために仮でCSSを適用
      <div className='App'>
        <Button variant='contained' color='primary'>
          ボタン
        </Button>
        <p>テキストの色も変更</p>
      </div>
    </ThemeProvider>
  );
}

export default App;

このようにThemeProviderでラッピングすることで全体にテーマを適用させることができます。

この他にも様々ありますが基本的にはこちらの使い方を真似すればできると思います！
色々試してUI向上を目指しましょう。
👇👇公式

Material-UIのthemeをカスタマイズする

デフォルトの状態

全体の背景色・ボタンの色とテキストカラー・入力文字の色を変更する

Discussion