Material-UIでサマリーが下部にあるアコーディオンを作りたい

はじめに

React+Material-UI でアプリ開発をしているのですが、デザイン上サマリー部分が下部にあるアコーディオンを作りたくて、公式ドキュメントを参照したのですが、そのような機能は見当たらなかったので スタイル でなんとかしました。

今回作りたいもの

対応方法

対応前

これが Material-UI を使用したシンプルな Accordion の実装です。

import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import Typography from "@mui/material/Typography";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";

export const SimpleAccordion = () => {
  return (
    <Accordion>
      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
        <Typography>サマリー</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Typography>アコーディオンの中身</Typography>
      </AccordionDetails>
    </Accordion>
  );
};

サマリー部分は上部にあります。

対応後

import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import Typography from "@mui/material/Typography";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+ import { styled } from "@mui/material/styles";

+ const AccordionExpandUpper = styled(Accordion)(({ theme }) => ({
+   display: "flex",
+   flexFlow: "column-reverse nowrap",
+ }));

export const SimpleAccordion = () => {
  return (
+    <AccordionExpandUpper>
-    <Accordion>
      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
        <Typography>サマリー部分</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Typography>アコーディオンの中身</Typography>
      </AccordionDetails>
+    </AccordionExpandUpper>
-    </Accordion>
  );
};

サマリー部分が下部に表示されました！

おわりに

公式でサポートされてなかったり、AccordionSummaryとAccordionDetails入れ替えるだけじゃうまくいかなかったので、どうしようかなと思っていたところ、スタイルの変更ですんなりできたので助かりました。
こんなことしなくてももっといい方法があるぞ！という方がいらっしゃいましたら、ぜひとも共有していただければ。。。