如何修改當前頁面的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：