[JavaScript知识库]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的元素

阅读世界，共赴山海

423全民读书节，邀你共读