前端 - 请问要如何才能对一个antd组件的多个class做样式修改呢，使用多className覆盖不能做到？

Question

现在有一个需求，就是对antd的Collapse做一个样式的修改，去掉border-radius：

// TestComp/index.tsximport type { CollapseProps } from 'antd';import { Collapse, Button } from 'antd';import styles from './index.module.css'const text = `  A dog is a type of domesticated animal.  Known for its loyalty and faithfulness,  it can be found as a welcome guest in many households across the world.`;const items: CollapseProps['items'] = [  {    key: '1',    label: <div style={{width: '100vh'}}><span>This is panel header 1</span></div>,    children: <p>{text}</p>,  },  {    key: '2',    label: 'This is panel header 2',    children: <p>{text}</p>,  },  {    key: '3',    label: 'This is panel header 3',    children: <p>{text}</p>,  },];const TestComp: React.FC = () => {  const onChange = (key: string | string[]) => {    console.log(key);  };  return <Collapse className={styles.myCollapse + ' ' + styles.myCollapse2} items={items} defaultActiveKey={['1']} onChange={onChange} />;};export default TestComp;

css代码如下：

// TestComp/index.module.tsx.myCollapse:global(.ant-collapse) {  border-radius: 0px !important;  }/* .myCollapse2:global(.ant-collapse-item:last-child) {  border-radius: 0px !important;} */

效果：
我们可以看到顶部左右是已经去除，但是下面的最后一个item没有去除：

所以我进一步想要对.ant-collapse-item:last-child 做修改：

// TestComp/index.module.tsx.myCollapse:global(.ant-collapse) {  border-radius: 0px !important;  }.myCollapse2:global(.ant-collapse-item:last-child) {  border-radius: 0px !important;} // tsx<Collapse className={styles.myCollapse + ' ' + styles.myCollapse2} items={items} defaultActiveKey={['1']} onChange={onChange} />;

但是不生效：

===

请问要如何才能对一个antd组件的多个class做样式修改呢？

===

编辑-01

代码如下：
https://codesandbox.io/s/ynk3tr

Answer 1

首先你这元素就没找对位置啊，从你截图里来看圆角是里面的 .ant-collapse-header 的，你给 .ant-collapse-item 去圆角干啥？

其次为啥你要起俩 class 呢？都用一个不就好了……

Answer 2

.myCollapse2 :global(.ant-collapse-item:last-child) {  border-radius: 0px !important;}

Answer 3

// scss为例
.myCollapse2{

:global{

.ant-collapse{

border-radius: 0px !important;

}
...
}

}