import { ReactElement , ReactNode } from 'react' ; import { makeStyles , Theme , createStyles } from '@material-ui/core/styles' ; import { Typography } from '@material-ui/core' ; import ListItem from '@material-ui/core/ListItem' ; const useStyles = makeStyles ( ( theme ) => createStyles ( { header : { backgroundColor : '#F7F7F7' , marginBottom : theme . spacing ( 0.25 ) , } , typography : { color : '#242424' , } , } ) ) ; interface Props { children ? : ReactNode | ReactNode [ ] ; } export default function ExpandableListItemNote ( { children } ) { const classes = useStyles ( ) ; return ( < ListItem className = { classes . header } > < Typography variant = "body1" className = { classes . typography } > { children } < /Typography> < /ListItem>); }