mui

● MUI v5 のインストール

( emotion )で使用する場合 (デフォルト)

yarn add @mui/material @emotion/react @emotion/styled

( styled-components )で使用する場合

yarn add @mui/material @mui/styled-engine-sc styled-components

エラーが出る場合は以下もインストールします

yarn add @emotion/react @emotion/styled

● MUI SVG icons のインストール

全てのアイコンをビルドすることになるので、ビルド時間を考えると個別にsvgで取り込むほうが良いです。 https://fonts.google.com/icons

インストールする場合は、こちらのコマンドから

yarn add @mui/icons-material

● テーマで背景色とテキストの色を変更する

src/layouts/customTheme.ts

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

const customTheme = createTheme({
  palette: {
    background: {
      default: "#F7F7F9",
    },
    text: { primary: "#4c4e64de" },
  },
});

export default customTheme;

App.tsx

import { CssBaseline, ThemeProvider } from "@mui/material";
import customTheme from "./layouts/customTheme";

function App() {
  return (
    <>
      <ThemeProvider theme={customTheme}>
        <CssBaseline></CssBaseline>
        ...................
      </ThemeProvider>
    </>
  );
}

export default App;
No.2150
02/28 23:46

edit