💎

MUIの“青いボタン”から卒業！グローバルテーマで自由にデザインする方法

に公開
Next.js
React
TypeScript
uiデザイン
mui
tech

「このサイト、MUIで作ったな」と一瞬でわかる──
そんな経験はありませんか？

MUI（Material UI）は、Reactで洗練されたUIを素早く構築できる便利なライブラリです。
しかし、デフォルトテーマのまま使っていると “MUIっぽさ” が出てしまい、代わり映えのないデザインになりがちです。

私も最初は「MUI＝青いボタンのUI」だと思っていました。
でも、テーマ設定を覚えると一気に“自分らしいデザイン”を作れるようになります。

https://mui.com/

この記事では、MUIのグローバルテーマ設定を活用して、UIの自由度を一気に上げる方法 を紹介します。
初心者の方でもすぐ使えるように、コピペOKのテンプレート付きで解説します。

この記事のゴール

  • グローバルなテーマ設定の仕組みを理解できる
  • 色・フォント・コンポーネント設定を統一できる
  • 「MUIを使いこなしている感覚」がつかめる

1. MUIテーマの基本構造をざっくり理解する

MUIでは、アプリ全体で共通のデザインを扱うために「テーマ」という仕組みがあります。
そのテーマをReact全体に適用するために使うのが ThemeProvider です。

ThemeProvider と createTheme を使ってアプリ全体に共通のスタイルを適用します。

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

const theme = createTheme({
  palette: {
    primary: { main: '#1976d2' },
    secondary: { main: '#9c27b0' },
  },
});

export default function Root() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  );
}

上記の ThemeProvider により、
アプリ全体で共通のテーマを参照できるようになります。

また、<CssBaseline /> を追加することで、
ブラウザごとの余白やスタイル差を自動的にリセットし、MUIの標準デザインを整えることができます。
これは、いわば「リセットCSSが不要になる便利な仕組み」です。

開発初心者の方は見落としがちですが、MUIを使うならほぼ必須の設定です。
これを入れないと、ブラウザによって余白やフォントサイズが微妙に違い、
「なぜかページによって見た目がズレる…」という状態になりがちです。

https://mui.com/material-ui/customization/theming/

https://mui.com/material-ui/react-css-baseline/

2. 私がMUIを使い始めたころの悩み

私がMUIを使い始めた頃は、以下のようなことに悩まされていました。

  • sxで毎回スタイルを上書きしていて、コードがどんどん煩雑になる
  • いつもデフォルトの同じ色になってしまう(MUIの青いコンポーネントから卒業できない)

これらは、当時の私がまったくグローバルテーマを理解していなかったことが原因でした。
MUIのテーマ機能を正しく使えば、デザインを根本から一括でコントロールできるようになります。

3. グローバルテーマ設定で自由度を上げる

ここからは、テーマを活用して「MUIっぽさ」から抜け出す実践方法を紹介します。

createThemeの設定をする際には以下のページを開いておくと全体像をつかみながらカスタムできるのでお勧めです。
https://mui.com/material-ui/customization/default-theme/

3-1. カラーパレットを独自定義する

MUIのデフォルトカラーは便利ですが、どうしても似たような印象になりがち。
自分のブランドや好みに合わせたカラーパレットを定義してみましょう。

const theme = createTheme({
  palette: {
    primary: { main: '#2E8B57' }, // 深緑
    secondary: { main: '#FFD700' }, // ゴールド
    background: { default: '#F9FAFB' },
  },
});

https://mui.com/material-ui/customization/color/

私はデザインや色選びが苦手なので、ツールを使って採用する色を決めています。
こちらは私のおすすめのカラーパレットツールです。
https://colorhunt.co/

3-2. Typography（文字）を整える

フォント設定を変えると、見た目の印象が一気に洗練されます。

const theme = createTheme({
  typography: {
    fontFamily: "'Noto Sans JP', 'Roboto', sans-serif",
    fontWeightRegular: 400,
    fontWeightBold: 600,
    h6: { fontSize: '1.1rem', fontWeight: 600 },
  },
});

https://mui.com/material-ui/customization/typography/

個人的には、Typographyのデフォルトのフォントサイズが気に入らないので、h1〜h6 やbody1などは個別設定で変更しています。

3-3. コンポーネントのデフォルトスタイルを上書きする

よく使うコンポーネント（Button, TextFieldなど）は、components設定で共通化できます。

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: 8,
          textTransform: 'none',
          padding: '6px 16px',
        },
      },
      defaultProps: {
        variant: 'contained',
        disableElevation: true,
      },
    },
    MuiTextField: {
      defaultProps: {
        variant: 'outlined',
        size: 'small',
      },
    },
  },
});

https://mui.com/material-ui/customization/theme-components/

これで全ページのボタン・フォームが統一され、コード量も大幅に削減できます。
特に毎回sxプロパティで指定しているような項目はここで設定してしまうのがよいですね。

3-4. sxでtheme値を活用する

ハードコーディングしてしまうと、あとからテーマカラーを変更したいときに全ての箇所を手作業で直す必要があり、修正コストが非常に高くなります。

// NG: カラーコードをそのまま使用
<Box sx={{ color: '#1976d2', p: '16px', bgcolor: '#f5f5f5' }}>
  サンプルテキスト
</Box>

sxプロップでは、themeで定義した値をそのまま使えます。

// 色の指定にtheme値を活用
<Box sx={{ color: 'primary.main', p: 2, bgcolor: 'background.default' }}>
  サンプルテキスト
</Box>

これにより、テーマを更新するだけで全体の色や余白を一括調整できます。
ハードコーディングが減り、保守性も大幅にアップします。

4. とりあえず使ってみたい方向け

最後に、そのまま使えるテンプレートを紹介します。
これをベースに、自分好みに少しずつ調整していくのが最もおすすめです。
アプリ全体に適用したいので、最上位のコンポーネント(ルート)に適用してください。

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

// この部分は長くなるので必要に応じて別ファイルに切り出す
const theme = createTheme({
  palette: {
    primary: { main: '#1E88E5' },
    secondary: { main: '#FFB300' },
    background: { default: '#FAFAFA' },
  },
  typography: {
    fontFamily: "'Noto Sans JP', sans-serif",
    fontSize: 14,
  },
  shape: { borderRadius: 12 },
  spacing: 8,
  components: {
    MuiButton: {
      styleOverrides: { root: { borderRadius: 8, textTransform: 'none' } },
    },
  },
});

export default function Root() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  );
}

これだけで：

  • デフォルトのリセット (CssBaseline)
  • ブランドカラー設定
  • 統一フォント・角丸・余白調整
    がすべて反映されます。

5. まとめ：MUIを“使いこなす”第一歩はthemeから

MUIを「難しい」「思い通りにならない」と感じる原因の多くは、デフォルトテーマに頼りすぎていることです。
createThemeとThemeProviderを使えば、UI全体の統一感・自由度・保守性を一気に高められます。

ポイントをおさらい：

  • ThemeProvider で全体のスタイルを統一
  • palette・typography・componentsで独自デザインを設定
  • CssBaseline でベースを整える
  • sxでtheme値を活用して一元管理

この辺を使いこなせていれば、大体のデザインは実現できるのではないかと思います。
また、これらの基本概念を抑えておけば、MUIだけでなく他のUIライブラリを使ったときにも応用が利くのではないかと思います。

Discussion