Ant Design 组件样式覆盖：解决 Collapse 组件圆角问题
在使用 Ant Design 开发过程中，自定义组件样式是常见需求。本文以 Collapse 组件为例，讲解如何高效地修改其样式，特别是处理多个 class 时的样式冲突。
问题：
开发者尝试移除 Ant Design Collapse 组件的圆角。最初使用多个 class 和 module.css 进行样式覆盖，但效果不佳。styles.mycollapse 移除整体圆角有效，但 styles.mycollapse2 试图移除最后一个 item 的圆角却失效。
代码示例（原始代码）：
// testcomp/index.tsx
import type { CollapseProps } from 'antd';
import { Collapse, Button } from 'antd';
import styles from './index.module.css';
// ... (其余代码省略)
const TestComp: React.FC = () => {
// ... (其余代码省略)
return (
<Collapse
className={`${styles.mycollapse}`}
defaultActiveKey={['1']}
items={items}
onChange={onChange}
/>
);
};
export default TestComp;
// testcomp/index.module.css
.mycollapse:global(.ant-collapse) {
border-radius: 0px !important;
}
.mycollapse2:global(.ant-collapse-item:last-child) {
border-radius: 0px !important;
}
问题分析与解决方案：
问题在于 CSS 选择器不准确。Collapse 组件的圆角并非由 .ant-collapse-item 控制，而是由 .ant-collapse-header 控制。因此，styles.mycollapse2 无效。
建议简化代码，避免使用多个 class。只需一个 class，并精确选择目标元素即可。直接修改 .ant-collapse-header 的样式即可达到目的。
改进后的样式代码：
// TestComp/index.module.css
.myCollapse:global(.ant-collapse-header) {
border-radius: 0px !important;
}
通过精确的选择器，有效解决了样式覆盖问题，并提升了代码可读性和维护性。 记住使用 :global() 来避免命名冲突，确保样式能够正确应用到 Ant Design 的组件上。
