使用Mui styled工具类无法覆盖Accordion组件样式如何解决

问题原因 #

• styled API 不需要嵌套root字段，该写法是旧版本makeStyles的用法，写在root里的样式不会被识别应用
• & .MuiPaper-root是后代选择器，匹配的是Accordion子元素内的MuiPaper-root节点，而MuiPaper-root本身就是Accordion根节点自带的类，匹配逻辑错误

修复代码 #

const CustomizedAccordion = styled(Accordion)<AccordionProps>(({ theme }) => ({
  color: 'darkslategray',
  backgroundColor: '#E4FAF4',
  borderRadius: '0.6rem',
  boxShadow: 'none',
  paddingBottom: '1.6rem',
}));

如果需要主动匹配根节点类名提升样式优先级，可以使用以下写法：

const CustomizedAccordion = styled(Accordion)<AccordionProps>(({ theme }) => ({
  "&.MuiPaper-root": {
    color: 'darkslategray',
    backgroundColor: '#E4FAF4',
    borderRadius: '0.6rem',
    boxShadow: 'none'
  },
  paddingBottom: '1.6rem',
}));

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