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

Question

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

// TestComp/index.tsx

import 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

// scss为例
.myCollapse2{

:global{

.ant-collapse{

border-radius: 0px !important;

}
...
}

}

Answer 3

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