뮤 스타일 mu 박스 に 아코디언 sx x 스타일 mu mu mu mu mu mu mu mu mu mu mu mu mu mu mu mu mu mu mu mu mu mu mu mu

반응형

Image description

参考に ttp してサイドバーを styled の訓練として作ってみる

아코디언 を accord accord accord accord accord

https://mui.com/components/accordion/

npm i @mui/icons-material

 

icons が必要なので別途 import する

mui のサンプルをコピーしてくるとこうなる。

accordion 1 のコードに注力してみる。

      <Accordion>

                <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
                      <Typography>Accordion 1</Typography>
        </AccordionSummary>

        <AccordionDetails>
                                  <Typography>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
                      </Typography>
        </AccordionDetails>

      </Accordion>

 

아코디언 の accord accord

accordionsummary で開く時に押すところのラベルを書く。
開く時のアイコンを指定できる。
この中に typography で文字を書く。

accordiondetails には開いた時に表示される中身。
この中にも typography で文字を書く。

そして acoordion を閉じる。これがワンセット。

    <div>
            <Accordion>
              <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
                      <Typography>Categories</Typography>
        </AccordionSummary>

        <AccordionDetails>
                      <Typography>
                        Social 2548
          </Typography>
        </AccordionDetails>

        <AccordionDetails>
                                    <Typography>
                                      Updastes 16,185
          </Typography>
        </AccordionDetails>

      </Accordion>

    </div>

 

gmail の真似をするっピ！

box sx width 200 で幅を狭くする

    <Box sx={ width : 200}>

      ```

      box で囲うことで幅を狭くできる

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

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

      かなり狭くできた。

      ## styled customizedbox で幅をせまくする

      ```js

const CustomizedBox = styled(Box)`
  background: red;
    width: 100;
    `;

    <CustomizedBox >
          <Accordion>

 

全く狭くならない。

赤くなっているので背景は効いている。

box には styled で width を当てることはできないと予測。

https://mui.com/system/box/#api

 

mui の box の欄には sx しか書いていないので、そう言うことっぽい。

박스 sx と 폭 を 높이 を

    <Box sx={ 
            width : 400,
            height: 400,
            background: 'red',
    }>

            <Accordion>
          ...

    ```

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

    こうやって box の sx に指定すれば、それの幅も高さも変えられる。

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

    accordion の高さは有限だが幅は無限なので、横はぴっちりする。縦は box がはみ出る。

    --

    ## 아코디언 sx 폭 を を を を を を を

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

    accordion にも sx で幅を当てられる。

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

    ```js

<Accordion sx={width: 300}>

box 400 に対して 300 にすると 100 だけ box がはみ出る。

아코디언 で 스타일 を 폭 を を accord accord accord accord accord accord accord

  const CustomizedAccordion = styled(Accordion)`
    background: gray;
    width: 100;
    height: 500;

아코디언 스타일 폭 height 높이 も accord accord accord accord accord accord accord accord accord accord accord accord accord accord accord.