踩坑笔记(九): 修改ant-design组件库中的样式

前言:在响应式项目中,有部分地方使用到了React UI组件库ant-design,由于是封装好的UI库,使用的单位都是px;与在响应式项目中用到单位(rem)不符,因此,需要修改。

  1. 新建css或less文件
  2. 引入UI库并渲染到页面后,右键检查元素,通过选择到对应的UI标签,查看它的class类名
    在这里插入图片描述3. 根据对应的类名和父子关系等,在css或less文件等修改样式,如:
    在这里插入图片描述
    4.在jsx文件中等引入。

后记:

  1. UI组件库毕竟就是已经将样式进行了更好的封装,在实际应用中更加偏向于固定样式的布局,在响应式布局中使用时需要设置样式。
  2. 如果CSS/Less样式没有生效,可以尝试采用!important 最高优先级的方法
  3. 该方法在React局部样式中好像不生效,后续需要进一步查看。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值