如何改变MUI手风琴标题字体大小

Question

我想改变MUI-5手风琴标题的字体大小。我想我得推翻它。但我不知道如何在MUI-5中覆盖CSS。它也没有'SX'，它有'htmlSx‘。我试着用它。但没起作用。

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

我试图覆盖css

Answer 1

您可以使用sx支持的Accordion并选择标题的类并更改其样式：

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>
  );
}

​

​

Answer 2

它有一个类名MuiAccordion-root，您可以从css访问它。

就像这样：

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