您好，如果喜欢我的文章，可以关注我的公众号「量子前端」，将不定期关注推送前端好文~

博主最近在自研Concis组件库，全局配置项目主题色的大体意思其实和antd一样，可以通过一款色系来全局配置Concis中所有组件的主题色，比如Concis默认的色系是蓝色(#1890FF)，如果公司业务的主题色是绿色、黄色，一个个去给单独组件加样式是很麻烦的，因此就有了需求的来源，效果图是这样的：

抛开Concis不谈，单从create-react-app来讲，其实思路很简单，在入口组件为它再包裹上一层createContext hook，把我们所需要定制的主题色向下传给所有子组件，在子组件中做一些兼容性处理，即可实现。

预期App组件的样子是这样的：

接下来我们先开始GlobalConfig组件的编写。

首先GlobalConfig会创建顶层通信装置，即React.createContext，将调用GlobalConfig所传入的色号接受，并向下传递给所有子组件，因此可以得出代码：

这里我们直接把props作为context值内容放进去就好，这里除了主题色也可以定制一些其他的颜色，比如在Menu组件中，选中背景样式其实是主题色更浅一些的颜色，就像这样：

因此可以自定义一些其他参数，如menuActiveTextBg，单独配置Menu的背景色，当然这只是例外，大部分场景在上面动图上其实单靠主题色一个参数就可以满足。

这里拿CheckBox组件举例，先忽略源代码，我们把GlobalConfig中导出的Context引入进来：

并且在组件中使用这个Context：

那么问题来了，声明在CSS文件中的颜色，如何在tsx组件中替换呢?

我们可以通过css自定义变量，在组件根标签中引入，就像这样：

这里我们在根标签引入了一个global-color属性，并且判断，如果自定义主题色了值就为主题色，否则就是默认颜色。

在CheckBox.module.less中就可以这样处理：

直接把原来的background-color: #1890ff; 替换为background-color: var(--global-color);

这样，打开页面，就可以看到CheckBox原本的蓝色选中样式变成了自定义颜色，当然这里的处理方式只是博主想到的，如果有更好的方案也欢迎评论区留言，因为博主的css其实学的并不好~~~

这里贴一下博主在组件库中写的一些源码，文章底部也会有整个组件库源码和npm链接。

index.tsx:

interface.ts:

代码其实很简单，主要Concis在之前都是写死了主题色为蓝色(#1890ff)，在所有子组件中的处理花费了比较大的时间。

Concis已经开发了接近半年时间，也是越来越成熟了，这里留一下Concis的一些Path：

开源不易，如果文章内容对你有帮助，请支持一下，非常感谢。