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

江湖yi山人

已于 2022-04-22 18:30:12 修改

阅读量2.2k

点赞数

文章标签： scss 公共组件三方组件

于 2022-04-22 18:22:23 首次发布

本文链接：https://blog.youkuaiyun.com/qq_30997503/article/details/124351477

版权

本文介绍了在开发中如何通过SCSS文件修改第三方组件DatePicker的样式，特别是‘取消’和‘确定’按钮的颜色。主要方法包括直接导入scss文件和使用module方式引入。通过指定class或使用[class*='xxx']选择器来定位元素并应用样式。这种方法有助于保持项目样式的一致性和个性化定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发过程中经常会用到三方组件，对三方组件中的样式进行修改显得尤为重要。
以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的元素
在这里插入图片描述