如果遇到组件使用到主题相关颜色一般怎么处理比较好?

Question

在使用一些框架库时,部分属性是一些和主题相关的属性。比如一个 icon 组件,可能支持 color 属性。
<icon :color="themColor"></icon>
如果主题的颜色是通过 css 声明的。例如
$themColor: rgba(25, 126, 66)
$themColor 一般也是在 css 中使用。那么要让 themColor 和 $themColor 一样可以通过新建一个文件引入比如

{
  themColor: "rgba(25, 126, 66)"
}

但是这种方式就需要保证两个文件是同步的。遇到这种情况怎么处理会比较容易维护

Answer 1

你这个相当于是JS变量和CSS变量值要保持一致。建议都直接用CSS变量，组件那里的color，也直接通过CSS里写个class来维护就行了，然后都使用CSS变量。

Answer 2

一般来说现在的主流方式是通过 CSS预处理器 来一定好一个主题文件，然后在 loader 中配置全局引入。这样在使用的时候就可以直接用这些配置好的变量以及通用的一些混入方法。

比如说 Element UI 的 var.scss 文件， AntD Vue 的 default.less 文件。