如何修改当前页面的antd组件的css样式

想要在当前页面修改ant-designUI组件的样式，需要在less样式文件中加上:global{}，如下代码所示，在当前组件的less文件中定义了一个类名叫做coupon，然后其中加入:global{}，在global中修改ant-design组件的样式。

.coupon { //只在当前组件中使用的样式类名
  :global {
    .antd-pro-components-description-list-index-term,  //ant-design定义的样式类名
    .antd-pro-components-description-list-index-detail {
      font-weight: bold;
      color      : red;
    }
  }
}

在jsx文件中引入上面代码定义的类名coupon

import styles from './index.less';

render(){
  return(
    <Description className={styles.coupon} term="优惠金额">5000元</Description>
  )
}

修改之后的页面样式：

修改之后的Elements：