diff --git a/ccm_web/client/src/components/APIErrorMessage.tsx b/ccm_web/client/src/components/APIErrorMessage.tsx index 1a0e155de..40aa693b5 100644 --- a/ccm_web/client/src/components/APIErrorMessage.tsx +++ b/ccm_web/client/src/components/APIErrorMessage.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Typography } from '@material-ui/core' +import { Typography } from '@mui/material' import { CanvasError } from '../utils/handleErrors' diff --git a/ccm_web/client/src/components/Accordion.tsx b/ccm_web/client/src/components/Accordion.tsx index a99113169..7febe4e4c 100644 --- a/ccm_web/client/src/components/Accordion.tsx +++ b/ccm_web/client/src/components/Accordion.tsx @@ -1,21 +1,39 @@ import React, { useState } from 'react' +import { styled } from '@mui/material/styles' import { - Accordion as MUIAccordion, AccordionDetails as MUIAccordionDetails, AccordionSummary as MUIAccordionSummary, - makeStyles -} from '@material-ui/core' -import ExpandMoreIcon from '@material-ui/icons/ExpandMore' + Accordion as MUIAccordion, + AccordionDetails as MUIAccordionDetails, + AccordionSummary as MUIAccordionSummary +} from '@mui/material' +import ExpandMoreIcon from '@mui/icons-material/ExpandMore' -const useStyles = makeStyles((theme) => ({ - container: { +const PREFIX = 'Accordion' + +const classes = { + container: `${PREFIX}-container`, + summary: `${PREFIX}-summary`, + summaryFocusVisible: `${PREFIX}-summaryFocusVisible`, + summaryFocusNotVisible: `${PREFIX}-summaryFocusNotVisible` +} + +const Root = styled('div')(( + { + theme + } +) => ({ + [`&.${classes.container}`]: { paddingTop: theme.spacing(1) }, - summary: { + + [`& .${classes.summary}`]: { backgroundColor: theme.palette.primary.main }, - summaryFocusVisible: { + + [`& .${classes.summaryFocusVisible}`]: { color: theme.palette.primary.main }, - summaryFocusNotVisible: { + + [`& .${classes.summaryFocusNotVisible}`]: { color: theme.palette.primary.contrastText } })) @@ -27,17 +45,16 @@ interface AccordionProps { } export default function Accordion (props: AccordionProps): JSX.Element { - const classes = useStyles() const [isSummaryFocusVisible, setIsSummaryFocusVisible] = useState(false) const summaryTextClass = isSummaryFocusVisible ? classes.summaryFocusVisible : classes.summaryFocusNotVisible return ( -