欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react项目:引入antd以及自定义antd主题

程序员文章站 2024-03-01 08:57:58
...

antd文档
https://ant.design/docs/react/use-with-create-react-app-cn
下载组件库包

yarn add antd

实现组件的按需打包
1.下载依赖模块

yarn add react-app-rewired customize-cra babel-plugin-import

2.定义加载配置的js模块: config-overrides.js

const {override, fixBabelImports} = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
);

3.修改配置: package.json

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

4.在应用中使用antd 组件

import React, {Component} from 'react'
import {Button, message} from 'antd'
class App extends Component {
	handleClick = () => {
		message.success('使用antd 组件');
	}
	render() {
		return (
			<Button type='primary' onClick={this.handleClick}>react</Button>
				)
		}
}
export default App

自定义antd 主题

下载工具包:
yarn add less less-loader
修改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'}, //自定义antd主题色
	}),
);

相关标签: react