DEV Community

kaede
kaede

Posted on

3 2

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

何をどうやって作るのか

Image description

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

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


Accordion を 入れてみる

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

npm i @mui/icons-material
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

Accordion シリーズと拡張の時のアイコン、material の styled を import する。

Image description

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Image description

Gmail の真似をするっピ!

Box sx width 200 で幅を狭くする

    <Box sx={{ width : 200}}>
Enter fullscreen mode Exit fullscreen mode

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

Image description

かなり狭くできた。


styled CustomizedBox で幅をせまくする

const CustomizedBox = styled(Box)`
  background: red;
  width: 100;
`;
Enter fullscreen mode Exit fullscreen mode
    <CustomizedBox >
      <Accordion>
Enter fullscreen mode Exit fullscreen mode

Image description

全く狭くならない。

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

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>
    ...
Enter fullscreen mode Exit fullscreen mode

Image description

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

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


Accordion sx で width を当てる

Image description

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

<Accordion sx={{width: 300}}>
Enter fullscreen mode Exit fullscreen mode

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


Accordion に styled で width を当てる

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

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

Image description


まとめ

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

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

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay