如何修改Ant Design折叠面板的文字颜色与内容框背景？

一、标题文字颜色修改（优先解决变白需求） #

Ant Design折叠面板的标题样式存在层级嵌套，普通选择器容易被默认样式覆盖，需要精准匹配DOM结构来设置：

/* 一级折叠面板标题文字设为白色 */
.ant-collapse > .ant-collapse-item > .ant-collapse-header {
  color: #ffffff;
}

/* 二级嵌套折叠面板标题可单独设置颜色（示例为浅灰色，按需调整） */
.ant-collapse > .ant-collapse-item > .ant-collapse-content > .ant-collapse > .ant-collapse-item > .ant-collapse-header {
  color: #e0e0e0;
}

如果使用CSS-in-JS（如styled-components），写法如下：

import styled from 'styled-components';
import { Collapse } from 'antd';

const StyledCollapse = styled(Collapse)`
  & > .ant-collapse-item > .ant-collapse-header {
    color: #ffffff;
  }

  & > .ant-collapse-item > .ant-collapse-content > .ant-collapse > .ant-collapse-item > .ant-collapse-header {
    color: #e0e0e0;
  }
`;

二、折叠内容框背景渐变设置 #

直接选中内容容器的类名，替换背景样式：

.ant-collapse-content-box {
  background: linear-gradient(180deg, rgba(6, 25, 25, 0.328579) 0%, rgba(0, 0, 0, 0.6) 100%);
  /* 若需要调整内边距等默认样式，可按需添加 */
}

注意事项 #

• 若样式仍不生效，检查是否有其他全局样式或父容器样式覆盖，可给选择器添加父容器类名提升优先级（例如.custom-collapse .ant-collapse > .ant-collapse-item > .ant-collapse-header）。
• 避免滥用!important，优先通过精准选择器层级来覆盖默认样式。

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