MUI CSS 스타일 구성 요소 슬라이더

반응형

mui でのスタイリングの 2 種類の比較

https://mui.com/guides/understand-mui-packages/

themeprovider, styled のスタイリング api が存在して、どちらかを選ぶらしい。

前のチームでは themeprovider を使っていて
今回のチームでは styled を使っている。

https://mui.com/customization/theming/#무엇보다 빠른

 

theming で毎回 themeprovider を書いてネストするので汚くなりがち。

스타일링한 styled　themeprovider でのラップと比べて、 export された名前の component を吐き出すので、使用するコンポーネントでテーマを意識しなくていいのが特徴。

스타일링한 つ 2つ

import { styled } from "@mui/material/styles";
import { styled } from "sytled-component";

mui/material からとってくる方法と
styled-component を使う方法がある。

 

使い方はほぼ同じだと思う。今回は mui/matiral/styles から持ってきて使う。

際 styled 스타일 cra 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"
  },

    ```

    <div class="content-ad"></div>

    これらの ts, mui, emotion, react, などのライブラリをまとめてインストールできる。

    ![Image description](https://res.cloudinary.com/practicaldev/image/fetch/s--EUpB0Z3Q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxrbr2ud75caxplkzct4.png)

    npm start するとこの文言が出てくる。

    ## 스타일링한 styled styled

    https://mui.com/guides/interoperability/#주요 고객

    <div class="content-ad"></div>

    mui.com のガイドの例を見てみる

    ```js

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 コンポーネントのライブラリをインポートする
뮤이/재료/돌기 스타일

そして customizedslider で slider の色と、ホバー時の色を上書き。

 

出力された通常時のスライダーの色が水色

マウスホバーしてる時の色が緑色

になる。

export default function StyledComponents() {
  return (
      <Box sx={ width: 300 }>
            <Slider />
                  <CustomizedSlider defaultValue={30} />;
                      </Box>
                        )
                        }

 

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