如何修改Ant Design Collapse折叠面板展开内容区域的背景色

问题原因 #

你当前的自定义样式未生效，通常是两个核心原因：

• Ant Design 原生的.ant-collapse-content默认样式优先级高于你的自定义样式，被默认规则覆盖
• 如果你使用的是CSS Modules方案，未做全局标记的嵌套类会被编译为带哈希后缀的局部类名，无法匹配Ant Design全局注册的ant-collapse-content类

解决方案1：CSS Modules适配（推荐，无优先级hack） #

你的JSX代码不需要调整，保持原有写法即可：

<Collapse className={styles.collapseStyle} expandIconPosition="right"></Collapse>

CSS部分用:global标记Ant Design的全局类名，同时匹配内层内容容器避免背景被覆盖：

.collapseStyle {
  background-color: #2f313583;
  :global(.ant-collapse-content) {
    background: #2f313583;
    .ant-collapse-content-box {
      background: #2f313583;
    }
  }
}

解决方案2：全局CSS场景/高优先级强制生效 #

如果是全局CSS项目，不需要CSS Modules，可以直接提升样式优先级实现覆盖：

.collapseStyle {
  background-color: #2f313583;
}
.collapseStyle .ant-collapse-content,
.collapseStyle .ant-collapse-content > .ant-collapse-content-box {
  background: #2f313583 !important;
}

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