如何将MUI Accordion（手风琴）组件的头部颜色修改为灰色？

你可以通过以下两种常用方式修改手风琴头部的背景色：

方式1：复用你现有自定义AccordionSummary的逻辑 #

你当前代码中定义AccordionSummary的withStyles配置是空的，直接补充根节点样式即可：

const AccordionSummary = withStyles({
  root: {
    // 替换为你需要的灰色色值即可，以下为示例浅灰色
    backgroundColor: '#f5f5f5',
    // 如果需要区分展开/折叠状态的样式，可新增以下配置
    '&.Mui-expanded': {
      backgroundColor: '#e0e0e0',
    }
  },
})(MuiAccordionSummary);

修改后保存即可看到效果，无需改动其他代码。

方式2：在全局makeStyles中新增样式类 #

如果不想修改自定义组件的配置，也可以直接新增样式类绑定到组件上：

1. 先在useStyles中新增头部样式配置：

const useStyles = makeStyles((theme) => ({
  root: {
    width: "100%"
  },
  heading: {
    fontSize: theme.typography.pxToRem(15),
    fontWeight: theme.typography.fontWeightRegular
  },
  // 新增手风琴头部样式
  accordionHeader: {
    backgroundColor: '#f5f5f5',
  }
}));

2. 给每个AccordionSummary组件绑定样式类：

<AccordionSummary
  className={classes.accordionHeader}
  expandIcon={<ExpandMoreIcon />}
  aria-controls="panel1a-content"
  id="panel1a-header"
>

如果需要同时修改头部文字颜色、内边距等属性，直接在对应的样式配置中加对应CSS属性即可。

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