如何为Antd Collapse Panel头部添加样式，解决样式不生效问题

• 选择器层级错误：你基于Collapse.Panel扩展的样式组件，对应DOM的类为.ant-collapse-item，属于父级Collapse组件（对应类.ant-collapse）的子元素，你在样式中写.ant-collapse > .ant-collapse-item是从父级向下匹配，在子组件的样式作用域内无法命中对应元素，优先级也不足。
• 标签选择器错误加类前缀：你写的.span匹配的是class为span的元素，实际要匹配的是<span>标签，不需要加.前缀。
• 颜色值非法：CSS中hsl、rgb、hex等颜色值不需要加引号包裹，引号会导致浏览器无法识别该属性值，样式直接失效。
• 覆盖范围不符合需求：当前写法会给所有StyledCollapsePanel的头部加样式，会影响第一个使用自定义TasksAssignedToMeHeader的面板，不符合你仅修改最后两个面板的需求。

export const StyledCollapsePanel = styled(Collapse.Panel)`
  .ant-collapse-content .ant-collapse-content-box {
    padding: 0px 0px 0px 28px;
  }
  .ant-col {
    // 去掉颜色值的引号
    color: hsl(214, 78%, 54%);
    font-weight: 500;
    text-align: left;
    text-transform: uppercase;
  }
  // 仅匹配除第一个之外的面板头部，避免影响自定义头部的第一个面板
  &:not(:first-of-type) > .ant-collapse-header {
    // 优先级不足时可加!important强制覆盖
    color: hsl(214, 78%, 54%) !important;
  }
`;

如果上述修改后仍不生效，可采用更稳定的自定义类匹配方案：

1. 给最后两个StyledCollapsePanel添加自定义类

<StyledCollapsePanel className="custom-header" key="tasksNotAssignedToMe" header="Tasks Not Assigned To Me">
  {/* 内容省略 */}
</StyledCollapsePanel>
<StyledCollapsePanel className="custom-header" key="completedTasks" header="Completed Tasks">
  {/* 内容省略 */}
</StyledCollapsePanel>

2. 样式中针对自定义类匹配

&.custom-header > .ant-collapse-header {
  color: hsl(214, 78%, 54%) !important;
}

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