How to change MUI Accordion title font size-CodePudding

I wanted to change the MUI-5 Accordion title font size. I think I have to override it. but I don't know how to override CSS in MUI-5. it also doesn't have 'SX', it has 'htmlSx'. I tried to use it. but it didn't work.

const AccordionNew: FC<AccordionProps> = ({ header, children }) => {
    return (
        <Box>
            <Accordion
                defaultExpanded={false}
                title={header}
                detailsContent={children}
                 htmlSx={(theme: Theme) => ({
                       '& .MuiTypography-h5': {
                         fontSize: '9px',
                        }
                     }),
                 }
            />
        </Box>
    );
};

I tried to override the css

CodePudding user response：

You can use sx prop of the Accordion and select class of the header and change its style:

export default function SimpleAccordion() {
  return (
    <div>
      <Accordion 
        sx={{'& .MuiTypography-root' :{   //use sx and select related class
              fontSize:'20px'             // change its style
      }}}>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography>Accordion 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

CodePudding user response：

it has a class name MuiAccordion-root that you can access it from css

sth like this :

.MuiAccordion-root .MuiAccordionSummary-content p{
   font-size:9px
}