React+MUI v9環境構築｜Viteで最短セットアップ【2026年】

「ReactにMUI（マテリアルUI）を入れたいのに、検索で出てくる記事がcreate-react-app前提で再現できない」——2026年のMUI入門で最初に踏む罠がこれです。
結論、今の正解はVite + React + MUI v9系。コマンド数個で終わります。この記事では、現役フロントエンドエンジニアの私が、プロジェクト作成からテーマカスタマイズまで「コピペで動く」2026年7月時点の最新手順を解説します。デザインに自信がなくても、MUIならそれなりに見えるUIが最速で作れます。

この記事でわかること
・Vite + React + MUI v9の最新セットアップ手順
・CssBaseline（リセットCSS）とcreateThemeによるカスタムテーマ
・sxプロパティなどよく使う書き方と、初心者がハマる落とし穴
・MUIが「v7の次がv9」になった理由

独学に限界を感じたら

プログラミング教室がおすすめ。挫折せず最短で実力を伸ばせます。

前提：2026年のMUI事情を30秒で

手を動かす前に、古い記事に惑わされないための現状整理です。

create-react-appは公式に廃止済み。新規プロジェクトはViteで作ります（理由はCRAからViteに移行すべき5つの理由を参照）。
MUIの現行メジャーはv9系（2026年4月リリース）。しかもMUIにv8は存在しません。姉妹ライブラリのMUI Xとバージョンを揃えるため、v7から一気にv9へジャンプしました。「v8の記事が見つからない」のは、あなたの検索力の問題ではないのです。
インストールするパッケージは従来どおり@mui/material + emotion系の3点セット。基本的な使い方（ThemeProvider・CssBaseline・sxプロパティ）はv5〜v9で大きく変わっていないので、本記事の手順は既存バージョンでもほぼそのまま通用します。

項目	昔（〜2023頃の記事）	2026年の最新
プロジェクト作成	create-react-app	Vite（npm create vite）
MUIのバージョン	v5前後（言及なしも多い）	v9系（v8は欠番）
エントリーファイル	src/index.js	src/main.tsx
コンポーネントのimport	深い階層のimportも可	1階層のみ（v7以降）

環境構築手順：4ステップ

ステップ1：ViteでReact(TypeScript)プロジェクトを作成する

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

2026年のMUIはTypeScriptとの相性が非常に良く、propsの候補がエディタに全部出てくるので、むしろ初心者ほどTypeScriptテンプレートを選ぶべきです。JavaScriptで作りたい場合は--template reactに変えてください。

ステップ2：MUIと必要なライブラリをインストールする

npm install @mui/material @emotion/react @emotion/styled

emotionはMUIが内部で使っているCSS-in-JSライブラリで、この2つがないとMUIは動きません。「MUIだけ入れたのにエラーが出る」という質問の答えは、だいたいこれです。

ステップ3：Robotoフォントを入れる（任意・推奨）

MUIはRobotoフォント前提でデザインされています。npmから入れてしまうのが管理しやすくおすすめです。

npm install @fontsource/roboto

import '@fontsource/roboto/300.css'
import '@fontsource/roboto/400.css'
import '@fontsource/roboto/500.css'
import '@fontsource/roboto/700.css'

ステップ4：ボタンを表示して動作確認する

import Button from '@mui/material/Button'

function App() {
  return (
    <Button sx={{ m: 5 }} variant="contained">
      Hello World
    </Button>
  )
}

export default App

npm run devで表示されるURL（既定ではhttp://localhost:5173/）を開いて、マテリアルデザインの青いボタンが出れば成功です。

ここで出てきたsxプロパティがMUIの主役です。sx={{ m: 5 }}はmargin指定のショートハンドで、CSSファイルを作らずにその場でスタイルを書けます。v9ではこのsxの処理性能が大きく改善されており、遠慮なく使ってOKです。

リセットCSSの設定（CssBaseline）

ブラウザ標準のスタイルの凸凹をならすため、MUI製のリセットCSS「CssBaseline」をエントリーファイルに入れます。

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import CssBaseline from '@mui/material/CssBaseline'
import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <CssBaseline />
    <App />
  </StrictMode>,
)

Viteのテンプレートに入っているindex.cssのimportは、MUI中心で作るなら消してしまって構いません。残すとMUIのスタイルと二重管理になり、初心者が混乱する原因になります。

カスタムテーマの設定（createTheme + ThemeProvider）

MUIの真価は「テーマで全コンポーネントの見た目を一括管理できる」こと。ブランドカラーやボタンの角丸を1ファイルで定義します。src/theme.tsを作成してください。

import { createTheme } from '@mui/material/styles'
import { orange } from '@mui/material/colors'

export const theme = createTheme({
  palette: {
    // primaryの色をブランドカラーに変更
    primary: {
      main: orange[300],
    },
  },
  components: {
    // ボタンのデザインを一括カスタマイズ
    MuiButton: {
      styleOverrides: {
        containedPrimary: {
          color: 'white',
          borderRadius: 0,
        },
      },
    },
  },
})

作ったテーマをThemeProviderでアプリ全体に適用します。

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import CssBaseline from '@mui/material/CssBaseline'
import { ThemeProvider } from '@mui/material/styles'
import { theme } from './theme'
import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  </StrictMode>,
)

ブラウザをリロードして、ボタンがオレンジ・角丸なしに変われば成功です。

現場でよくあるのは、テーマを設定せずに各画面でsxに同じ色コードをコピペし続けるプロジェクト。後からブランドカラーを変えるとき全ファイル置換になります。最初の10分でtheme.tsを作るかどうかが、半年後の保守コストを決めます。

よく使うコンポーネントを組み合わせてみる

最後に、実務で登場頻度の高いStack（並べる）・TextField（入力欄）・Buttonを組み合わせた、ミニ問い合わせフォームの例です。

import Stack from '@mui/material/Stack'
import TextField from '@mui/material/TextField'
import Button from '@mui/material/Button'
import Typography from '@mui/material/Typography'

function App() {
  return (
    <Stack spacing={2} sx={{ maxWidth: 400, mx: 'auto', mt: 5 }}>
      <Typography variant="h5" component="h1">
        お問い合わせ
      </Typography>
      <TextField label="お名前" variant="outlined" />
      <TextField label="内容" multiline rows={4} />
      <Button variant="contained">送信</Button>
    </Stack>
  )
}

export default App

CSSを1行も書いていないのに、整ったフォームができます。MUIは「デザインの独学」を後回しにしてアプリの中身に集中させてくれるライブラリ——ポートフォリオ制作との相性が抜群なのはこのためです。

初心者がハマるポイントとプロのコツ

ハマりどころ①：アイコンが使えない。アイコンは別パッケージなのでnpm install @mui/icons-materialが必要です。
ハマりどころ②：古い記事の深い階層import（例：@mui/material/styles/createThemeのような2階層以上）はv7以降エラーになります。importは@mui/material/Buttonのような1階層までと覚えてください。
プロのコツ：スタイルの微調整はsx、使い回すデザインはtheme.tsのstyleOverridesへ。この線引きを守るだけでコードレビューで指摘されないMUIコードになります。

まとめ：MUIはポートフォリオ最速ルート

2026年はVite + React + MUI v9系が標準構成（v8は欠番）
インストールは@mui/material @emotion/react @emotion/styledの3点セット
CssBaselineでリセット、createTheme + ThemeProviderで一括カスタマイズ
微調整はsx、共通デザインはテーマに寄せる

次のアクションは、この構成でログイン画面かTODOアプリを1本作ってみること。コード品質まで整えるならVite + React + TypeScriptにESLintとPrettierを導入する完全ガイドを、Next.jsで使いたい人はNext.js + MUIの環境構築を続けてどうぞ。
MUIで見た目の整ったポートフォリオが作れると、転職活動での第一印象が確実に変わります。作品はできたのに書類が通らない——そんなときは、ポートフォリオの見せ方まで添削してくれる転職エージェントやスクールを頼るのも立派な戦略です。独学で全部抱え込む必要はありません。