给 React 穿上美丽的‘嫁衣’-技术圈

嗨，我是你稳定更新、持续输出的勾勾。

今天的题目，猛一看是不是很惊讶！

啥玩意儿就给 React 穿上嫁衣了？

莫慌！简单来说，就是怎么给 React 定义主题颜色，也就是我们今天的主题。

创建 React 项目

首先，使用 React 脚手架创建一个 React 项目：npx create-react-app project 。当项目创建完成之后目录如图所示：

一个简单的项目目录，好像也没啥。但问题就在这里，怎么入手配置主题，值得咱们思考。

这里我推荐 antd 中使用的 craco 来添加 react 项目的配置文件，不建议使用 npm run eject 还原配置文件。具体操作如下：

安装 craco 安装指令 npm install @craco/craco
项目目录下添加新文件 craco.config.js
在 craco.config.js 中写入如下内容


module.exports = {
};

配置主题

接下来就是给 React 配置主题了。

这里我们使用 less 来定义主题变量，所以我们需要安装 less less-loader，并且还有一个模块不能忘了，它是 craco 和 less 的桥梁。

craco-less

npm i less less-loader craco-less

然后在 craco.config.js 中配置主题：


//craco.config.jsconst CracoLessPlugin = require('craco-less');
module.exports = {  plugins: [    {      plugin: CracoLessPlugin,      options: {        lessLoaderOptions: {            lessOptions: {              modifyVars: { '@primary-color': '#c63923','@gougou-color':'#81a6e9' },              javascriptEnabled: true,            }          }      }    }  ]};

在 lessOptions 中需要注意 modifyVars 这个属性，它就是用来定义主题变量的。

这里我们添加了两个主题标题，一个是 @promary-color，一个是 @gougou-color，共两个主题。

使用主题颜色

我们在项目中的 src 下将 App.css 改成 App.less 文件，在 App.js 中写入一个 ‘

勾勾的前端世界

’。

同时在 App.less 中写入一个样式代码。


//App.less
h3{color：@gougou-color；}

注意

所有工作准备好之后，不能立即就启动指令，而是要在 package.json 中修改启动指令。

//package.json"scripts": {    "start": "craco start",    "build": "craco build",    "test": "craco test"  },

到此，整个主题的配置就算完事了，接下来我们 npm start 启动服务。在页面中就能看到这个主题颜色正常显示出来了。

推荐阅读：

是我 Web 端配不上阿里了。

开发一个属于自己的 web 服务器

JavaScript 模块打包器——Rollup

Proxy 代理对象

API 终结者 —— 杀手 Reflect

前端人因为 Vue3 的 Ref-sugar 提案打起来了！

点点“赞”和“在看”，保护头发，减少bug。