如何修改MUI-5 Accordion标题字体大小？htmlSx配置无效求助

首先纠正你代码里的语法错误：htmlSx的回调函数后面多了一个多余的逗号，这会直接导致配置不生效，先修正这个问题。

接下来提供几种可行的解决方案：

方案1：修正htmlSx配置并确保选择器准确 #

1. 先移除多余逗号，然后通过浏览器开发者工具（F12）查看Accordion标题元素的实际类名（比如可能是.MuiAccordionSummary-content .MuiTypography-root，而非你写的.MuiTypography-h5），调整选择器的精准度；若优先级不足，可添加!important强制生效：

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

方案2：自定义标题元素（更直接） #

如果该封装的Accordion组件支持传入自定义title元素，直接将header替换为带样式的Typography组件，无需通过CSS覆盖：

const AccordionNew: FC<AccordionProps> = ({ header, children }) => {
    return (
        <Box>
            <Accordion
                defaultExpanded={false}
                title={<Typography sx={{ fontSize: '9px' }}>{header}</Typography>}
                detailsContent={children}
            />
        </Box>
    );
};

方案3：全局CSS覆盖（备选） #

在全局样式文件中添加如下代码（注意替换为标题元素的真实类名）：

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

关键提示 #

• 务必通过浏览器开发者工具定位标题元素的真实类名，错误的选择器是样式不生效的常见原因。
• 优先使用方案2，直接自定义标题元素的方式更符合MUI组件设计思路，也更易维护。

内容的提问来源于stack exchange，提问作者inusha maduranga