【React】React ～ Material UI / あれこれ編 ～

◾️はじめに

React の Material UI (MUI) に関するTipsを
徐々にまとめておく

目次

【１】ライト・ダークテーマの切替
【２】Tooltipの表示
【３】Iconの表示

【１】ライト・ダークテーマの切替

src/App.tsx

import * as React from 'react';
import {
  Button,
  Container,
  Typography,
  CssBaseline,
  createTheme,
  ThemeProvider,
} from '@mui/material';

function App() {
  // true = ダークモード、false = ライトモード
  const [darkMode, setDarkMode] = React.useState(false);

  // MUI のテーマを作成
  const theme = React.useMemo(
    () =>
      createTheme({
        palette: {
          mode: darkMode ? 'dark' : 'light',
        },
      }),
    [darkMode]
  );

  return (
    <ThemeProvider theme={theme}>
      {/* CssBaselineで背景や文字色を自動的にテーマに合わせる */}
      <CssBaseline />

      <Container
        maxWidth="sm"
        sx={{
          textAlign: 'center',
          marginTop: '100px',
        }}
      >
        <Typography variant="h4" gutterBottom>
          Hello World from React + MUI + TypeScript!
        </Typography>

        <Button
          variant="contained"
          color="primary"
          sx={{ marginTop: 2 }}
          onClick={() => alert('Hello MUI + TypeScript!')}
        >
          Click Me
        </Button>

        <Button
          variant="outlined"
          sx={{ marginTop: 2, marginLeft: 2 }}
          onClick={() => setDarkMode((prev) => !prev)}
        >
          Toggle {darkMode ? 'Light' : 'Dark'} Mode
        </Button>
      </Container>
    </ThemeProvider>
  );
}

export default App;

機能	説明
Container	レイアウト（配置
Typography	テキスト表示
sx プロパティ	スタイル指定が可能
ThemeProvider	全体にテーマ（色・フォントなど）を適用
createTheme	MUI標準テーマを作成（mode に "dark" or "light" を指定）
CssBaseline	テーマに合わせて背景や文字色を自動調整
useMemo	テーマ再生成の最適化（パフォーマンス向上）

【２】Tooltipの表示

* Tooltipの表示するためには、
　対象を<Tooltip title="xxx">〜</Tooltip >で囲むだけ

サンプル

import {
  Tooltip,
  Button
} from '@mui/material';

export default function BasicTooltip() {
  return (
    <Tooltip title="This is a tooltip.">
      <Button>Hover me</Button>
    </Tooltip>
  );
}

【３】Iconの表示

Step1: アイコン探し

* 以下のサイトで欲しいアイコンを探す

https://mui.com/material-ui/material-icons/

Step2: アイコン設定

import MenuOpenIcon from '@mui/icons-material/MenuOpen'

<MenuOpenIcon />

関連記事

React ～ 入門編 ～ * https://dk521123.hatenablog.com/entry/2020/04/29/000000
React ～ Material UI / 入門編 ～
https://dk521123.hatenablog.com/entry/2025/10/14/224514
React ～ Material UI / Spacing ～
https://dk521123.hatenablog.com/entry/2025/11/09/230101