mui styled で Box に Accordion を入れて sx と styled の大きさ調整を試す。

何をどうやって作るのか

Gmail のまねをしてサイドバーを MUI Accordion を使って作る。

さらに sx や　styled を使用してラッパーの Box や本体の大きさを変更する。

---

Accordion を 入れてみる

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

npm i @mui/icons-material

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

import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';

import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

import { styled } from '@mui/material';

Accordion シリーズと拡張の時のアイコン、material の styled を 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>

Accordion のなかに

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 で囲うことで幅を狭くできる

かなり狭くできた。

---

styled CustomizedBox で幅をせまくする

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

    <CustomizedBox >
      <Accordion>

全く狭くならない。

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

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

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

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

---

Box sx で width と height を当てる

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

      <Accordion>
    ...

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

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

---

Accordion sx で width を当てる

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

<Accordion sx={{width: 300}}>

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

---

Accordion に styled で width を当てる

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

Accordion にも styled では　width も height も聞かない。

---

まとめ

Accordion と AccordionSummary、ExpandMoreIcon、AccordionDetails を使って閉じたり開いたりできるタイプのサイドバーのリンクを作れる

sx プロパティで幅や高さが変えられるが、styled では無理。