如何修改Ant Design Collapse组件头部与内容区域的文本颜色

解决方案 #

你遇到的样式不生效问题可以按以下步骤排查修复：

1. 修正CSS属性写法 #

styled-components的模板字符串内使用原生CSS语法，不能用JSX的驼峰式属性名，你写的fontSize要改为标准CSS属性font-size。

2. 正确匹配全局类名 #

Ant Design的组件类名是全局输出的，不会被styled-components编译，直接写.ant-collapse-header会被styled当作自定义类名加上哈希后缀，无法匹配到AntD原生类。需要用:global()包裹全局类名，同时用&&&提高优先级覆盖默认样式，正确写法如下：

const StyledCollapse = styled(AntCollapse)`
  &&& {
    border: none;
    border-radius: 0px;
    box-shadow: none;  
    background: #0e0304;
  }
  &&& :global(.ant-collapse-content) {
    font-size: 25px;
    color: #fff;
  }
  &&& :global(.ant-collapse-header) {
    font-size: 25px;
    color: #fff;
  }
`;

3. 异常情况排查 #

如果修改后样式仍不生效，可以打开浏览器控制台的元素面板，查看对应DOM节点的样式列表：

• 如果你写的样式没有出现在列表中，说明选择器匹配错误，检查类名拼写、:global语法是否正确
• 如果你写的样式出现但被划掉，说明优先级仍不足，可以在选择器前再加一级父类选择器调整权重即可

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