MUI でのスタイリングの 2 種類の比較
https://mui.com/guides/understand-mui-packages/
ThemeProvider, styled のスタイリング API が存在して、どちらかを選ぶらしい。
前のチームでは ThemeProvider を使っていて
今回のチームでは styled を使っている。
https://mui.com/customization/theming/#nesting-the-theme
Theming で毎回 ThemeProvider を書いてネストするので汚くなりがち。
styled は ThemeProvider でのラップと比べて、 export された名前の component を吐き出すので、使用するコンポーネントでテーマを意識しなくていいのが特徴。
styled の 2つ
import { styled } from "@mui/material/styles";
import { styled } from "sytled-component";
mui/material からとってくる方法と
styled-component を使う方法がある。
使い方はほぼ同じだと思う。今回は mui/matiral/styles から持ってきて使う。
# 実際に styled で CRA する
React, TS, MUI をインストール
https://github.com/mui/material-ui/tree/master/examples/create-react-app-with-typescript
matrial-ui のレポジトリに mui と ts のスタンダード？がある
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/create-react-app-with-typescript
cd create-react-app-with-typescript
これで curl でダウンロードしてくる
create-react-app-with-typescript % npm i
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
added 1403 packages, and audited 1404 packages in 1
cd して npm i する。パッケージが 1403 もあるので 1min かかる。
"dependencies": {
"@emotion/react": "latest",
"@emotion/styled": "latest",
"@mui/material": "latest",
"@types/react": "latest",
"@types/react-dom": "latest",
"react": "latest",
"react-dom": "latest",
"react-scripts": "latest",
"typescript": "latest"
},
これらの ts, mui, emotion, react, などのライブラリをまとめてインストールできる。
npm start するとこの文言が出てくる。
styled を使う
https://mui.com/guides/interoperability/#styled-components
mui.com のガイドの例を見てみる
import * as React from 'react';
import Slider from '@mui/material/Slider';
import { styled } from '@mui/material/styles';
const CustomizedSlider = styled(Slider)`
color: #20b2aa;
:hover {
color: #2e8b57;
}
`;
export default function StyledComponents() {
return <CustomizedSlider defaultValue={30} />;
}
mui/material から Slider コンポーネントのライブラリをインポートする
mui/material/stuyles から styled を持ってくる。
そして CustomizedSlider で Slider の色と、ホバー時の色を上書き。
出力された通常時のスライダーの色が水色
マウスホバーしてる時の色が緑色
になる。
export default function StyledComponents() {
return (
<Box sx={{ width: 300 }}>
<Slider />
<CustomizedSlider defaultValue={30} />;
</Box>
)
}
普通に出力されるスライダーと並べると、色の変更が適用されているのがわかりやすい。
Top comments (0)