Ant Design Collapse组件圆角如何精准去除？

深入解析Ant Design Collapse组件样式修改难题：精准去除圆角

本文针对Ant Design Collapse组件样式修改的常见问题进行深入探讨，特别是解决使用多个className覆盖样式无效的问题，最终实现精准去除Collapse组件圆角。 问题源于开发者尝试通过多个className修改样式，但效果不佳。

开发者尝试在index.module.css中定义.myCollapse和.myCollapse2两个类名，分别作用于.ant-collapse和.ant-collapse-item:last-child以去除圆角，但.myCollapse2样式失效。 代码片段显示，开发者修改了.ant-collapse和.ant-collapse-item:last-child的border-radius属性，仅.ant-collapse样式生效。

问题核心在于CSS选择器的精准性和样式应用方式。 关键在于，.ant-collapse-item:last-child并非圆角所在元素。根据图片显示，圆角位于Collapse面板的标题区域，即.ant-collapse-header。 因此，应修改.ant-collapse-header的border-radius属性。

此外，建议开发者避免使用多个类名（.myCollapse和.myCollapse2），将所有样式规则整合到一个类名中，例如.myCollapse，以提高代码可读性和可维护性。 这能有效避免类名优先级冲突，实现样式的精准控制。

通过精准选择目标元素（.ant-collapse-header）并整合样式规则，即可有效修改Ant Design Collapse组件样式，轻松去除圆角，达到预期效果。