基本的な使い方
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { ThemeProvider, createTheme } from "@mui/material/styles"; const apptheme = createTheme({ palette: { mode: "light", primary: { main: "#d87274", light: "#ffa2a3", dark: "#a34449", }, }, }); <ThemeProvider theme={apptheme}> <div>xxx</div> </ThemeProvider> |
createThemeという関数でthemeを作って、ThemeProviderというコンポーネントにラップしてthemeをソース全体に適用させます。
palette
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const apptheme = createTheme({ palette: { mode: "light", primary: { main: "#d87274", light: "#ffa2a3", dark: "#a34449", }, }, }); <Button color="primary"> primary </Button> |
spacing
定義
全てのpxの基準になります。指定しなかった場合はデフォルトで8pxになります。
|
1 2 3 |
const apptheme = createTheme({ spacing: 4, }); |
Boxのsxへの適用
margin、padding
|
1 2 |
<Box sx={{ m: 2,p: 2 }}> </Box> |
2と指定したら、2(各DOMで指定したpx)*4(themeで指定したpx)の8pxのスペースが取られるようになります。
その他プロパティ（width、borderRadiusなど）
margin、padding以外は以下のようにちょっとトリッキーな指定の仕方をしないとそのままpxとして適用されてしまいます。
|
1 |
<Box sx={{ width: (theme) => theme.spacing(8) }}> |
この記事へのコメントはありません。