React material-uiでAccordionを実装する

はじめに

表題通り、Reactのmaterial-uiでAccordionを実装します。

成果物

ディレクトリ構成

~/develop/react/acodion_material_ui$ tree -I node_modules
.
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.tsx
│   ├── MyAccordion.tsx
│   ├── index.tsx
│   └── logo.svg
├── tsconfig.json
└── yarn.lock

3 directories, 14 files

App.tsx

import React from 'react';
import { MyAccordion } from './MyAccordion';

function App() {
  return <MyAccordion />;
}

export default App;

src/MyAccordion.tsx

import React, { useState } from 'react';
import {
  Accordion,
  AccordionSummary,
  AccordionDetails,
  Typography,
} from '@material-ui/core';
import { KeyboardArrowUp, KeyboardArrowRight } from '@material-ui/icons';

export const MyAccordion: React.FC = () => {
  const [expanded, setExpanded] = useState(false);
  const toggleAccordion = () => {
    setExpanded(!expanded);
  };

  return (
    <Accordion expanded={expanded} onChange={toggleAccordion}>
      <AccordionSummary
        expandIcon={expanded ? <KeyboardArrowUp /> : <KeyboardArrowRight />}
      >
        <Typography variant="h6">アコーディオン タイトル</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Typography>アコーディオンサンプルです！！！！</Typography>
      </AccordionDetails>
    </Accordion>
  );
};