想要在当前页面修改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: