yarn add @mui/material @emotion/react @emotion/styled
yarn add @mui/material @mui/styled-engine-sc styled-components
エラーが出る場合は以下もインストールします
yarn add @emotion/react @emotion/styled
全てのアイコンをビルドすることになるので、ビルド時間を考えると個別に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;