MUI CSS styled-component を使って Slider を上書きしてみる

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>
  )
}

普通に出力されるスライダーと並べると、色の変更が適用されているのがわかりやすい。