MUIのテーマカスタマイズ
MUI（Material-UI）はデフォルトのテーマをベースに、簡単にテーマをカスタマイズできる柔軟なシステムを提供しています。これにより、アプリケーションのデザインをブランドや要件に合わせて調整可能です。
ここでは、デフォルトテーマの理解から、カスタムテーマの作成、色やフォントのカスタマイズ、ダークモードの実装方法までを解説します。
デフォルトテーマの理解
MUIでは、アプリケーション全体にわたるスタイル設定が可能なテーマが用意されています。このテーマは、色、タイポグラフィ、スペーシング、ブレークポイントなどの設定を含んでいます。MUIのデフォルトテーマにアクセスするには、createTheme関数を使用します。
import { createTheme } from '@mui/material/styles';
const defaultTheme = createTheme();
console.log(defaultTheme);
defaultThemeオブジェクトには、色、フォントサイズ、ブレークポイントなどの設定が含まれています。デフォルトテーマは基本的な設定としてそのまま利用できますが、これをカスタマイズすることでアプリケーションに特化したデザインを適用できます。
カスタムテーマの作成
カスタムテーマを作成するためには、createTheme関数を使用して、デフォルトテーマを上書きします。その後、ThemeProviderでアプリケーション全体にカスタムテーマを適用します。
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { CssBaseline, Button } from '@mui/material';
import React from 'react';
const customTheme = createTheme({
palette: {
primary: {
main: '#1976d2',
},
secondary: {
main: '#ff4081',
},
},
typography: {
fontFamily: 'Arial',
},
});
function App() {
return (
<ThemeProvider theme={customTheme}>
<CssBaseline />
<Button variant="contained" color="primary">
カスタムテーマボタン
</Button>
</ThemeProvider>
);
}
export default App;
この例では、paletteオプションを使って、テーマの主要な色をカスタマイズし、typographyオプションでフォントを変更しています。ThemeProviderでcustomThemeを渡すことで、アプリ全体にカスタムテーマが適用されます。
色やフォントのカスタマイズ
MUIでは、色やフォントのカスタマイズが非常に柔軟です。色のカスタマイズは、paletteオブジェクト内で指定します。主な設定は以下のとおりです。
primary: 主要な色secondary: 補助的な色error: エラー表示用の色background: 背景色
const customTheme = createTheme({
palette: {
primary: {
main: '#4caf50',
},
secondary: {
main: '#ff5722',
},
background: {
default: '#f5f5f5',
},
},
typography: {
fontFamily: 'Roboto, Arial',
fontSize: 14,
},
});
また、フォントのサイズや行の高さ、文字の太さもtypographyで細かく指定できます。
ダークモードの実装
MUIでは、ダークモードを簡単に実装できます。palette.modeに'dark'を指定することで、ダークモードのカスタムテーマを作成できます。
const darkTheme = createTheme({
palette: {
mode: 'dark',
},
});
function App() {
return (
<ThemeProvider theme={darkTheme}>
<CssBaseline />
<Button variant="contained" color="primary">
ダークモードボタン
</Button>
</ThemeProvider>
);
}
この設定により、MUIの全てのコンポーネントがダークモード用にスタイル調整されます。CssBaselineコンポーネントを使用することで、全体のスタイルがリセットされ、ダークモードの外観が整います。
スタイリングとカスタムCSS
MUIでは、さまざまな方法でコンポーネントのスタイリングが可能です。sxプロップ、makeStyles、styled APIなどを使用して、柔軟にカスタムスタイルを適用できます。ここでは、それぞれのスタイル適用方法について詳しく説明します。
MUIのsxプロップの使用
sxプロップは、MUIで簡単にインラインスタイルを適用するための強力なツールです。シンプルかつ直感的にスタイルを指定できるため、特にレスポンシブデザインやテーマに依存したスタイリングに適しています。
import { Box } from '@mui/material';
function StyledBox() {
return (
<Box
sx={{
bgcolor: 'primary.main',
color: 'white',
padding: 2,
borderRadius: 1,
}}
>
スタイルが適用されたBox
</Box>
);
}
sxプロップは、MUIのテーマに依存しており、theme内のプロパティを簡単に参照できるのが特徴です。たとえば、上記の例では、primary.mainとしてテーマのメインカラーが指定されています。
makeStylesの使用
makeStylesは、CSS-in-JSのアプローチでスタイルを定義するためのフックです。テーマにアクセスしやすく、カスタマイズが柔軟に行えます。
import { makeStyles } from '@mui/styles';
import { Button } from '@mui/material';
const useStyles = makeStyles((theme) => ({
customButton: {
backgroundColor: theme.palette.primary.main,
color: 'white',
'&:hover': {
backgroundColor: theme.palette.primary.dark,
},
},
}));
function StyledButton() {
const classes = useStyles();
return <Button className={classes.customButton}>カスタムボタン</Button>;
}
この例では、makeStylesで作成したスタイルをButtonコンポーネントに適用しています。themeオブジェクトを使用することで、テーマに基づいたカスタムスタイルが簡単に指定できます。
styled APIの使用
styled APIを使うと、コンポーネント自体に直接スタイルを付与することができます。styledはよりコンポーネント志向で、スタイルをコンポーネントにネストさせたい場合に便利です。
import { styled } from '@mui/material/styles';
import { Button } from '@mui/material';
const CustomButton = styled(Button)(({ theme }) => ({
backgroundColor: theme.palette.secondary.main,
color: theme.palette.common.white,
padding: theme.spacing(2),
'&:hover': {
backgroundColor: theme.palette.secondary.dark,
},
}));
function App() {
return <CustomButton>スタイル付きボタン</CustomButton>;
}
styled APIでは、スタイルのオブジェクトをコンポーネントに直接渡し、そのコンポーネントにネストされたスタイルを適用できます。
MUIコンポーネントにカスタムクラスを追加する方法
MUIでは、標準的なCSSクラスを使ってカスタムスタイルを追加することも可能です。classNameプロップを使用して、コンポーネントにカスタムCSSクラスを適用します。
import './CustomStyles.css';
import { Button } from '@mui/material';
function CustomClassButton() {
return <Button className="custom-button">カスタムクラスボタン</Button>;
}
CustomStyles.css内にクラスを定義し、それをclassNameプロップで適用するだけで、従来のCSSスタイルも利用可能です。
.custom-button {
background-color: #ff5722;
color: white;
padding: 10px;
border-radius: 5px;
}
このようにして、従来のCSSアプローチとMUIの強力なスタイル管理システムを組み合わせることが可能です。
強力なUIコンポーネントライブラリ「MUI（Material-UI）」について《トラブルシューティング編》
強力なUIコンポーネントライブラリ「MUI（Material-UI）」について《テーマ・スタイリング編》
強力なUIコンポーネントライブラリ「MUI（Material-UI）」について《コンポーネント編》
強力なUIコンポーネントライブラリ「MUI（Material-UI）」について《概要編》
インフラストラクチャ自動化ツール「Terraform」について《ベストプラクティスとトラブルシューティング編》
インフラストラクチャ自動化ツール「Terraform」について《応用編》
インフラストラクチャ自動化ツール「Terraform」について《基本編》
インフラストラクチャ自動化ツール「Terraform」について《導入編》
【CSS+JS】背景画像の視差効果（パララックス）を実装する方法
【CSS+JS】モーダルウィンドウを表示しその中にYouTube動画を動的に埋め込む
【Rails】アプリケーションサーバー「Unicorn」の基本情報と実装方法
【Git】マージにおけるfast-forwardとnon-fast-forwardの違い
MySQL Workbenchでリモートサーバー上のMySQLにSSH接続する方法【接続できない場合の対処法あり】
【Rails】忘れがちなルーティングの書き方を総復習
【Rails】忘れがちなGemfileの書き方を総復習
【Rails】M1チップ搭載MacでRuby on Railsの開発環境構築