給 React 穿上美麗的‘嫁衣’

嗨，我是你穩(wěn)定更新、持續(xù)輸出的勾勾。

今天的題目，猛一看是不是很驚訝！

啥玩意兒就給 React 穿上嫁衣了？

莫慌！簡(jiǎn)單來(lái)說(shuō)，就是怎么給 React 定義主題顏色，也就是我們今天的主題。

創(chuàng)建 React 項(xiàng)目

首先，使用 React 腳手架創(chuàng)建一個(gè) React 項(xiàng)目：npx create-react-app project 。當(dāng)項(xiàng)目創(chuàng)建完成之后目錄如圖所示：

一個(gè)簡(jiǎn)單的項(xiàng)目目錄，好像也沒(méi)啥。但問(wèn)題就在這里，怎么入手配置主題，值得咱們思考。

這里我推薦 antd 中使用的 craco 來(lái)添加 react 項(xiàng)目的配置文件，不建議使用 npm run eject 還原配置文件。具體操作如下：

• 安裝 craco 安裝指令 ?npm install @craco/craco

• 項(xiàng)目目錄下添加新文件 craco.config.js

• 在 craco.config.js 中寫入如下內(nèi)容

module.exports = {
};

配置主題

接下來(lái)就是給 React 配置主題了。

這里我們使用 less 來(lái)定義主題變量，所以我們需要安裝 less less-loader，并且還有一個(gè)模塊不能忘了，它是 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 這個(gè)屬性，它就是用來(lái)定義主題變量的。

這里我們添加了兩個(gè)主題標(biāo)題，一個(gè)是 @promary-color，一個(gè)是 @gougou-color，共兩個(gè)主題。

使用主題顏色

我們?cè)陧?xiàng)目中的 src 下將 App.css 改成 App.less 文件，在 App.js 中寫入一個(gè) ‘

勾勾的前端世界

同時(shí)在 App.less 中寫入一個(gè)樣式代碼。

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

注意

所有工作準(zhǔn)備好之后，不能立即就啟動(dòng)指令，而是要在 package.json 中修改啟動(dòng)指令。

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

到此，整個(gè)主題的配置就算完事了，接下來(lái)我們 npm start 啟動(dòng)服務(wù)。在頁(yè)面中就能看到這個(gè)主題顏色正常顯示出來(lái)了。

推薦閱讀：

是我 Web 端配不上阿里了。

開(kāi)發(fā)一個(gè)屬于自己的 web 服務(wù)器

JavaScript 模塊打包器——Rollup

Proxy 代理對(duì)象

API 終結(jié)者 —— 殺手 Reflect

前端人因?yàn)?Vue3 的 Ref-sugar 提案打起來(lái)了！

點(diǎn)點(diǎn)“贊”和“在看”，保護(hù)頭發(fā)，減少bug。