react小白的成长之路（三）react中使用antd并改变其主题颜色的正确打开方式

react中使用antd并改变其主题颜色的正确打开方式

今天在使用antd的时候，默认的蓝色让我有一种土土的感觉。既然antd官方提供了改变主题的方法，为什么不尝试一下呢。但是我功力尚浅，通过释放配置文件进行更改操作带来的是一波接着一波的报错。直到阅读了官方文档之后，我才发现了正确的打开方式。

第一步

和往常一样，第一步首先要做的就是进行一波插件的安装，这里我们要用到的插件有：

antd -- 使用antd当然要先引入antd啦
react-app-rewired -- 这是一个对create-react-app脚手架进行自定义配置的社区解决方案
customize-cra -- 这个是为了能够使用react-app-rewired@2.x而需要的插件
babel-plugin-import -- 这个是按需加载组件代码和样式的Babel插件，可以很好的解决前端的性能问题
less & less-loader -- 这是我们的老朋友了

//安装一下需要的插件
yarn add antd react-app-rewired customize-cra babel-plugin-import less less-loader

第二步

第二步需要更改一下package.json文件，很简单，只需要将：

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
}

更改为：

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
}

就可以啦

第三步

第三步是跟关键的一步，首先我们需要在根目录下创建一个叫做config-overrides.js的文件，然后再里面填入：

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
    //写了下面这个部分，就实现了按需加载，再也不需要再每个页面里面都引入“antd/dist/antd.css”啦
    fixBabelImports('import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true  //这里一定要写true，css和less都不行哦
    }),
    addLessLoader({
      javascriptEnabled: true,
      //下面这行很特殊，这里是更改主题的关键，这里我只更改了主色，当然还可以更改其他的，下面会详细写出。
      modifyVars: { "@primary-color": "#f47983"}
    })
)

这里我选择我最爱的死亡芭比粉(快乐起来了呢！！)，大家也可以选择自己喜欢的颜色。

备注

当然除了全局主色，还可以更改很多选项，这里都统一列出来：

@primary-color: #1890ff;                         // 全局主色
@link-color: #1890ff;                            // 链接色
@success-color: #52c41a;                         // 成功色
@warning-color: #faad14;                         // 警告色
@error-color: #f5222d;                           // 错误色
@font-size-base: 14px;                           // 主字号
@heading-color: rgba(0, 0, 0, .85);              // 标题色
@text-color: rgba(0, 0, 0, .65);                 // 主文本色
@text-color-secondary : rgba(0, 0, 0, .45);      // 次文本色
@disabled-color : rgba(0, 0, 0, .25);            // 失效色
@border-radius-base: 4px;                        // 组件/浮层圆角
@border-color-base: #d9d9d9;                     // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, .15);  // 浮层阴影

死亡芭比粉

沉寂在死亡芭比粉中无法自拔：）

最后编辑于：2019.02.22 21:30:34