skiss
©skiss 1997 - 2024
タイトル : Next.js MUI Themeを試してみる
更新日 : 2024-01-27
カテゴリ : プログラミング
タグ :
frontend   
nextjs   
material-ui   

MUI Themeを試してみます

Theming と Material-UIを使って全体のスタイリング(カラー等)を変更する方法 を参考にしました。

Pallete にある Default colors のmainを確認してみます。

ソース抜粋

      <Typography color={"primary"}>メニュー1の画面</Typography>

      <Stack direction={"row"} spacing={1}>
        <Button variant="contained" color={"primary"}>primary</Button>
        <Button variant="contained" color={"secondary"}>secondary</Button>
        <Button variant="contained" color={"error"}>error</Button>
        <Button variant="contained" color={"warning"}>warning</Button>
        <Button variant="contained" color={"info"}>info</Button>
        <Button variant="contained" color={"success"}>success</Button>
      </Stack>

以下になります。 画像1

テーマを使って、色を変えましょう。プリンス好きなので、メインをパープルにしますね。

まずは、src/theme.ts を以下のように作成します。createThemeを使ってテーマを作ります。

'use client'

import {createTheme} from "@mui/material/styles";

const theme = createTheme({
    palette: {
      primary: {
        main: '#D6D6FA',
        light: '#a50082',
        contrastText: '#6c2463'
      },
      background: {
        paper: '#E6E6FA',
      }
    },
  });
  
  export default theme;

それで、layout.tsxに作ったテーマをで反映させます。

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
import { Stack } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";
import Header from '@/components/header';
import Sidebar from '@/components/sidebar';

import theme from '@/theme';

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Next MUI Test",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <AppRouterCacheProvider>
         <ThemeProvider theme={theme}>
          <Stack>
            <Header />
          </Stack>
          <Stack direction={"row"}>
            <Stack>
              <Sidebar />
            </Stack>
            <Stack>
              {children}
            </Stack>
          </Stack>
          </ThemeProvider>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

そうすると以下みたいになります。

画像2