📘

Next.jsでMUIのグローバルCSSを設定をする方法

2023/02/05に公開

Next.js

React

Node.js

tech

実装

MUIのthemeを使います。

_app.tsxでグローバルのテーマを設定する

pages/_app.tsx

import type { AppProps } from "next/app";
import { CssBaseline, ThemeProvider } from "@mui/material";
import { theme } from "../src/theme";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

Css Baselineコンポーネントは、MUIコンポーネントにnomarized.cssを適用するために使用している。

src/theme.ts

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

export const theme = createTheme({
  palette: {
    primary: {
      main: "rgb(100 166 192)",
    },
    secondary: {
      main: "rgb(241 149 100)",
    },
  },
});

pallet(色)や文字、Spacingやブレイクポイントのグローバル設定をできる

使うときに、<Typography color="primary.main">hoge</Typography>オブジェクトの中身を指定して使用する

FYI

実装

Discussion