react中使用antd并配置less修改主题

Antd 的基本使用

进入 Antd 官方网站查看具体使用文档

安装和初始化

在 react 项目中进行安装 yarn add antd 或者 npm i antd 安装

简单使用

在 App.js 文件中引入按钮并使用
注意, 这里还需要引入 css 样式import 'antd/dist/antd.css'

import React, {Component} from 'react'
import {Button} from 'antd';    // 引入按钮
import 'antd/dist/antd.css';   // 还需要引入 css 样式
export default class App extends Component {render() {
    return (
      <div>
        <Button> 我是 antd 的按钮哦 </Button>
      </div>
    )
  }
}

Antd 的高级配置

按需加载 目的是不用引入 import 'antd/dist/antd.css' 各个组件就可以拥有自己的 css 样式

• 前提需要安装react-app-rewired / customize-cra

  yarn add react-app-rewired
  yarn add customize-cra

• 需要配置 package.json 文件

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

• 在项目根目录下增加一个文件config-overrides.js
  
• 再去安装 babel-plugin-import
yarn add babel-plugin-import

• 找到 config-overrides.js 文件 进行配置

  const {
      override,
      addLessLoader, // less 配置函数
      fixBabelImports, // 按需加载配置函数
      addBabelPlugins // babel 插件配置函数
  } = require('customize-cra')
  
  module.exports = override(addLessLoader(),
      ...addBabelPlugins( // 支持装饰器
          [
              '@babel/plugin-proposal-decorators',
              {legacy: true}
          ]
      ),
      fixBabelImports('import', { // antd 按需加载
          libraryName: 'antd',
          libraryDirectory: 'es',
          style: 'css'
      })
  )

• 现在从 antd 组件库里面引入组件，那么组件就拥有各自的样式了。

项目使用 less

直接新建 less 文件，在 js 文件中导入即可使用

app.js

import React from 'react';
import './App.css';
import {Button} from 'antd';
import './demo.less'

function App() {
  return (
    <div className="App">
      <Button type="primary"> 点击 </Button>
    </div>
  );
}

export default App;

demo.less

span {color: red;}

运行项目测试如下：

去除 antd 运行警告

react 使用 antd 警告:Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance

警告原因:

是因为 react 中的严格模式: StrictMode

解决办法：

在 index.js 中挂载 App 的外面有这样一个标签
只要把这个标签删除掉就可以了