DEV Community

kaede
kaede

Posted on

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

#mui #styled #css

何をどうやって作るのか

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 では無理。

Top comments (0)