MUIで事前にカラーの設定を行う
NextjsとMUIを利用するときに、最初の設定である程度カラーを設定し利用しようと思って設定を探してみました。
基本的なthemeの設定
theme.tsx
const theme = createTheme({
palette: {
primary: {
main: "#EFE5FD",
},
secondary: {
main: "#2db8d0",
},
},
typography: {
fontFamily: "Roboto, sans-serif",
},
});
export default theme;
/layout.tsx
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ja" className="w-[100%] h-[100%]">
<ThemeProvider theme={theme}>
<body className={inter.className}>
<CustomNavbar />
{children}
</body>
</ThemeProvider>
</html>
);
}
上記のように設定することで基本的なMUIの設定が完了します。
MUIでカラーを追加設定して使用する場合
以下ではprimary[400]などを追加で定義して使う方法となります。
まず、上記で定義したthemeにカラーを追加し、
PaletteColorにタイプを追加します。
※PaletteColorタイプを追加しないと、使用する際にエラーになってしまうので注意
theme.tsx
"use client";
import { createTheme } from "@mui/material/styles";
declare module "@mui/material/styles" {
interface PaletteColor {
"50"?: string;
"100"?: string;
"200"?: string;
"300"?: string;
"400"?: string;
"500"?: string;
"600"?: string;
"700"?: string;
"800"?: string;
"900"?: string;
}
}
"use client";
import { createTheme } from "@mui/material/styles";
declare module "@mui/material/styles" {
interface PaletteColor {
"50"?: string;
"100"?: string;
"200"?: string;
"300"?: string;
"400"?: string;
"500"?: string;
"600"?: string;
"700"?: string;
"800"?: string;
"900"?: string;
}
}
const theme = createTheme({
palette: {
primary: {
"50": "#efe5fd",
"100": "#d4bff9",
"200": "#b794f6",
"300": "#9965f4",
"400": "#7e3ff2",
"500": "#6002ee",
"600": "#5300e8",
"700": "#3d00e0",
"800": "#1d00db",
"900": "#0000d6",
},
secondary: {
"50": "#fffde6",
"100": "#fef9c2",
"200": "#fdf699",
"300": "#fcf16f",
"400": "#f9ec4b",
"500": "#fcec2a",
"600": "#fbd922",
"700": "#fac118",
"800": "#f9a80a",
"900": "#f77e00",
},
},
typography: {
fontFamily: "Roboto, sans-serif",
},
});
export default theme;
/layout.tsxファイルは変更点がないので、そのままで大丈夫です。
これで実際のコンポーネントに適用する準備ができました。
次に以下のようにuseTheme()メソッドを利用し、
theme.tsxで設定した色を使用することができます
/page.tsx
"use client";
import { Typography, useTheme } from "@mui/material";
export default function Home() {
const theme = useTheme();
return (
<Typography sx={{ color: theme.palette.secondary[400] }}>Hello</Typography>
);
}