import React from "react"; import { makeStyles } from "@material-ui/core/styles"; import Accordion from "@material-ui/core/Accordion"; import AccordionSummary from "@material-ui/core/AccordionSummary"; import AccordionDetails from "@material-ui/core/AccordionDetails"; import Typography from "@material-ui/core/Typography"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; import NotificationsActiveIcon from "@material-ui/icons/NotificationsActive"; import { List, ListItem, ListItemIcon, ListItemText, } from "@material-ui/core"; const useStyles = makeStyles((theme) => ({ root: { width: "100%", }, heading: { fontSize: theme.typography.pxToRem(15), fontWeight: theme.typography.fontWeightRegular, }, })); export default function SimpleAccordion() { const classes = useStyles(); return ( <div className={classes.root}> <Accordion> <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header" > <Typography className={classes.heading}>Accordion 1</Typography> </AccordionSummary> <AccordionDetails> <List> <ListItem button key={1}> <ListItemIcon> <NotificationsActiveIcon /> </ListItemIcon> <ListItemText primary="Hello" /> </ListItem> </List> </AccordionDetails> </Accordion> </div> ); }