6.1 antd的基本使用—4.x最新版
概要总结
1、流行的开源React UI组件库
2、安装并引入antd
一、流行的开源React UI组件库
1、material-ui(国外)
(1)官网：www.material-ui.com/#/
(2)github：github.com/callemall/m…
2、ant-design(国内蚂蚁金服)
(1)官网：ant.design/index.cn
(2)github：github.com/ant-design/…
二、安装并引入antd
1、安装antd依赖库
npm i antd
2、引入组件和样式
注意：antd在4的版本或以下，它是需要自己引入css的。但在5之后就不需要了，它在你引入具体组件的同时，样式也帮你引进去了，不需要独立引入。
import React, {Component} from 'react';
import {Button} from 'antd'
// import 'antd/dist/antd.css'
export default class App extends Component {
render() {
return (
<div>
App......
<button>点我</button>
<Button type="primary">按钮1</Button>
<Button>按钮2</Button>
<Button type="link">按钮3</Button>
</div>
);
}
}
3、引入@ant-design/icons
对于antd来说，它也不是把所有的组件全部融合在一个库里，有一些他们认为不是常用的组件它就抽出来一个独立的包，有需要才引入，减轻主库的容量。ant-design/icons就是一个图标库。
import React, {Component} from 'react';
import {Button} from 'antd'
import {WechatOutlined, WeiboOutlined} from '@ant-design/icons'
// import 'antd/dist/antd.css'
export default class App extends Component {
render() {
return (
<div>
......
<WechatOutlined/>
<WeiboOutlined/>
</div>
);
}
}
4、使用复杂的组件
这里以带有图标的按钮和日期控件为例。
import React, {Component} from 'react'; import {Button, DatePicker} from 'antd' import {WechatOutlined, WeiboOutlined, SearchOutlined} from '@ant-design/icons' const { RangePicker } = DatePicker export default class App extends Component { render() { return ( <div> <Button type="primary" icon={<SearchOutlined/>}>Search</Button> <DatePicker/> <RangePicker/> </div> ); } }
6.2 antd样式的按需引入和自定义主题—4.x
概要总结
1、安装babel-plugin-import、@craco/craco和craco-less三个依赖
2、修改package.json启动命令
3、根目录创建craco-config.js
ant-design官网：4x.ant.design/docs/react/…
craco-antd官网：github.com/DocSpring/c…
参考文章：www.codenong.com/cs106752545…
一、安装@craco/craco和craco-less两个依赖
npm i @craco/craco craco-less
二、修改package.json启动命令
安装了craco依赖之后，就不能用之前脚手架的react-scripts命令了，得改成craco
{
......
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "craco eject"
},
......
}
三、根目录创建craco-config.js
1、安装babel-plugin-import依赖
它是一个用于按需引入的插件，安装它之后才能对craco-config.js进行修改。
npm i babel-plugin-import
2、修改craco-config.js
const CracoAntDesignPlugin = require('craco-antd');
module.exports = {
plugins: [
{
plugin: CracoAntDesignPlugin
}
]
};
3、去掉全局引入import 'antd/dist/antd.css'
四、自定义主题
自定义主题只需要在craco.config.js添加一个options配置即可。
const CracoAntDesignPlugin = require('craco-antd');
module.exports = {
plugins: [
{
plugin: CracoAntDesignPlugin,
options: {
customizeTheme: {
"@primary-color": "#1DA57A"
}
}
}
]
};
6.3 antd的自定义主题—5.x
概要总结
1、引入antd的ConfigProvider修改主题配置
ant-design官网：ant.design/docs/react/…
注意：在antd5的版本，已经不需要引入样式了，因为它已经帮我们做好了按需加载。
一、自定义主题
5的antd版本比4更简洁，不用创建配置文件，只需要在根目录组件包裹一个ConfigProvider标签即可。
// 引入ReactDOM的createRoot
import {createRoot} from 'react-dom/client'
// 引入App组件
import App from './App'
// 引入antd的自定义主题标签
import {ConfigProvider} from "antd";
const containter = document.getElementById('root')
const root = createRoot(containter)
// 渲染App到页面
root.render(
<ConfigProvider
theme={{
token: {
colorPrimary: '#00b96b'
}
}}
>
<App/>
</ConfigProvider>
)
