scss文件中修改三方组件样式

开发过程中经常会用到三方组件,对三方组件中的样式进行修改显得尤为重要。
以DatePicker为例,通过scss文件修改取消和确定按钮的样式。
在这里插入图片描述
修改后:
在这里插入图片描述

首先找到要修改元素对应的class,此处”取消“按钮为am-picker-popup-header-left,”确定“按钮为am-picker-popup-header-right,
主要有以下两种方法:

1 直接导入.scss文件

.js文件内容如下


import './index.scss'

<DatePicker
	...
/> 

.scss文件内容如下

.am-picker-popup-header-left {
	color: #999999;
}

.am-picker-popup-header-right {
	color: #FF7F0F;
}

2 通过module方式引入

.js文件内容如下


import cn from './xxx.module.scss'

<DatePicker
	...
	className={cn.datepicker} // 用来修改的新class,也可不加
/> 

.scss文件内容如下

.datepicker {
	[class*='am-picker-popup-header-left'] {
    	color: #999999;
  	}
	
	[class*='am-picker-popup-header-right'] {
    	color: #FF7F0F;
  	}
}

或者不需新增class,直接写在.scss的最外层,如下


[class*='am-picker-popup-header-left'] {
   	color: #999999;
}

[class*='am-picker-popup-header-right'] {
   	color: #FF7F0F;
}

其中,[class*=‘xxx’]表示匹配所有class名为xxx的元素
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值