React 学习笔记 —— antd 的使用

安装使用

运行

yarn add antd

引入使用

import React, {
          
    Component } from react
import {
          
   Button} from antd	// 引入需要的组件
import antd/dist/antd.css	// 引入样式
export default class App extends Component {
          
   
  render() {
          
   
    return (
      <div>
        <Button type="primary">点我</Button>	// 使用
      </div>
    )
  }
}

按需引入配置

安装 react-app-rewired 和 customize-cra

yarn add react-app-rewired customize-cra

修改 package.json 脚本命令配置

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

安装 babel-plugin-import —— 用于按需加载组件代码和样式的 babel 插件

yarn add babel-plugin-import

在 根目录 新建 config-overrides.js ，并编辑以下内容

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

module.exports = override(
  fixBabelImports(import, {
          
   
    libraryName: antd,
    libraryDirectory: es,
    style: css,
  }),
);

移除 import antd/dist/antd.css，因为不需要我们自己引入样式了 最后重新启动项目，可以看到，虽然没有自己引入样式，但组件还是正常呈现了

自定义主题

在按需引入配置的基础上，再做以下配置 安装 less、less-loader

yarn add less less-loader@6.0.0

修改 config-overrides.js 内容

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

module.exports = override(
  fixBabelImports(import, {
          
   
    libraryName: antd,
    libraryDirectory: es,
    style: true,
  }),
  addLessLoader({
          
   
    lessOptions: {
          
   
      javascriptEnabled: true,
      modifyVars: {
          
    @primary-color: tomato },
    }
  }),
);

重启项目，即可看到按钮颜色改变