Theme
基本的な使い方
|
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) }}> |
ブロックレベル要素
Boxコンポーネント
普通のHTMLで言えばdivの代わりになります。（divだとsxが使えない）
sx Propsを直接記述できるのでレイアウトの基礎になります。v4でもありましたが、v5ではパフォーマンスが大幅に向上したようです。
Containerコンポーネント
コンテナを中央寄せするためのコンポーネントです。maxWidthなどを指定します。
|
1 |
<Container maxWidth="xs"> |
themeを使えば、どのピクセルを基準にするかのbreakpointの変更も可能です。
Stackコンポーネント
|
1 2 3 4 5 6 7 8 9 10 |
import { Stack, Button } from "@mui/material"; <Stack direction="row" spacing={2}> <Button variant="contained" color="primary"> primary </Button> <Button variant="contained" color="secondary"> secondary </Button> </Stack> |
spacingを指定します。そうすれば自動的に子要素を間隔をあけて配置してくれます。
内部的にはflexboxのコンテナ的な役割になっています。
インライン要素
Typographyコンポーネント
普通のHTMLで言えばspanの代わりになります。（spanだとsxが使えない）
themeで設定ができるのでtheme通りにスタイリングしたい場合などにも使えます。
この記事へのコメントはありません。