mui styled で Box に Accordion を入れて sx と styled の大きさ調整を試す。
Tags: mui, styled, css
Published: 2022-03-06 21:09:33


## 何をどうやって作るのか

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ls6ycwx1tep2rqtbxttp.png)

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

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

---

## Accordion を 入れてみる

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

```
npm i @mui/icons-material
```

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

```ts
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 する。

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cqdk8xbmordffjgr3joy.png)

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

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

```ts
      <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 を閉じる。これがワンセット。

```ts
    <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>
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8hd2rmi1y0qo78vdd98o.png)

Gmail の真似をするっピ！

## Box sx width 200 で幅を狭くする

```ts
    <Box sx={{ width : 200}}>
```

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7zt8n9k7npbtv0apm3p.png)

かなり狭くできた。

---

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

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

```ts
    <CustomizedBox >
      <Accordion>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8tgs032dgzmxq3rz0g28.png)

全く狭くならない。

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

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

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

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

---

## Box sx で width と height を当てる

```ts
    <Box sx={{ 
      width : 400,
      height: 400,
      background: 'red',
    }}>
    
      <Accordion>
    ...
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36myxtr76yhclcznu4tv.png)

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

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

---

## Accordion sx で width を当てる


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/puukwyw7w6mq1ky2f15f.png)

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

```ts
<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 も聞かない。

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4y0b90f85c33cb9n6oko.png)

---

## まとめ

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

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