antd在React项目中的使用
文档地址:https://ant.design/index-cn
antd的基本使用
安装antd
yarn add antd
基本使用
import React, { Component } from 'react'
import { Button } from 'antd';
import 'antd/dist/antd.css'; // 引入样式
export default class Home extends Component {
render() {
return (
<div>
<Button type="primary">Primary Button</Button>
</div>
)
}
}
antd样式的按需引入、自定义主题
https://3x.ant.design/docs/react/use-with-create-react-app-cn
安装依赖包
yarn add react-app-rewired customize-cra babel-plugin-import less less-loader
修改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 文件
//配置具体的修改规则
const { override, fixBabelImports,addLessLoader} = require('customize-cra');
module.exports = override(
// 样式的按需引入
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
// 自定义主题
addLessLoader({
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' }
})
);
备注:不用在组件里亲自引入样式了,即:import 'antd/dist/antd.css’应该删掉
遇到的问题
解决办法
- less-loader 的版本过高,不兼容 getOptions 函数方法,所以需要对 less-loader 进行降级处理
- 通过
yarn remove less-loader
命令卸载原版本的 less-loader,然后 通过yarn add less-loader@5.0.0
安装,问题就解决了。