(一） 使用Ant-design
1.什么是Ant Design?
antd 是蚂蚁金服开源的 React UI 组件库，主要用于研发企业级中后台产品，相当于Vue 版本的 Element UI
2.Ant Design特点
🌈 提炼自企业级中后台产品的交互语言和视觉风格。
📦 开箱即用的高质量 React 组件。
🛡 使用 TypeScript 开发，提供完整的类型定义文件。
⚙ 全链路开发和设计工具体系(业务战略-用户场景-设计目标-交互体验-用户流程-预期效率等全方面考虑和分析)。
🌍 数十个国际化语言支持。
🎨 深入每个细节的主题定制能力。
3.Ant Design兼容性
antd@2.0 之后不再支持 IE8。
antd@4.0 之后不再支持 React 15 和 IE9/10。
4.Ant Design使用
npm install antd --save
然后打开官方文档抄
官方文档地址: Ant-Design
import React from 'react'; import { DownloadOutlined } from '@ant-design/icons'; import { Button, Radio, Space, Divider } from 'antd'; function App() { return ( <> <Radio.Group value="large"> <Radio.Button value="large">Large</Radio.Button> <Radio.Button value="default">Default</Radio.Button> <Radio.Button value="small">Small</Radio.Button> </Radio.Group> <Divider orientation="left" plain> Preview </Divider> <Space direction="vertical"> <Space wrap> <Button type="primary"> Primary </Button> <Button>Default</Button> <Button type="dashed"> Dashed </Button> </Space> <Button type="link"> Link </Button> <Space wrap> <Button type="primary" icon={<DownloadOutlined />}/> <Button type="primary" shape="circle" icon={<DownloadOutlined />} /> <Button type="primary" shape="round" icon={<DownloadOutlined />}/> <Button type="primary" shape="round" icon={<DownloadOutlined />}> Download </Button> <Button type="primary" icon={<DownloadOutlined />}> Download </Button> </Space> </Space> </> ); }; export default App;
根据官网抄的.png
如何使用定制的主题呢
https://ant.design/docs/react/customize-theme-cn
import React from 'react'; import { DownloadOutlined } from '@ant-design/icons'; import { Button, Radio, Space, Divider, ConfigProvider } from 'antd'; function App() { return ( <> <ConfigProvider theme={{ token: { colorPrimary: '#00b96b', }, }} > <Radio.Group value="large"> <Radio.Button value="large">Large</Radio.Button> <Radio.Button value="default">Default</Radio.Button> <Radio.Button value="small">Small</Radio.Button> </Radio.Group> <Divider orientation="left" plain> Preview </Divider> <Space direction="vertical"> <Space wrap> <Button type="primary"> Primary </Button> <Button>Default</Button> <Button type="dashed"> Dashed </Button> </Space> <Button type="link"> Link </Button> <Space wrap> <Button type="primary" icon={<DownloadOutlined />}/> <Button type="primary" shape="circle" icon={<DownloadOutlined />} /> <Button type="primary" shape="round" icon={<DownloadOutlined />}/> <Button type="primary" shape="round" icon={<DownloadOutlined />}> Download </Button> <Button type="primary" icon={<DownloadOutlined />}> Download </Button> </Space> </Space> </ConfigProvider> </> ); }; export default App;
将primary的样色修改为绿色.png
修改组件变量 (Component Token)不影响其他组件的primary的颜色为官方给的颜色
import React from 'react'; import { Button, Radio, Space, ConfigProvider } from 'antd'; function App() { return ( <> <ConfigProvider theme={{ components: { Radio: { colorPrimary: '#00b96b', }, }, }} > <Radio.Group value="large"> <Radio.Button value="large">Large</Radio.Button> <Radio.Button value="default">Default</Radio.Button> <Radio.Button value="small">Small</Radio.Button> </Radio.Group> <Space direction="vertical"> <Space wrap> <Button type="primary"> Primary </Button> <Button>Default</Button> <Button type="dashed"> Dashed </Button> </Space> <Button type="link"> Link </Button> </Space> </ConfigProvider> </> ); }; export default App;
image.png
其实还可以通过webpack修改，但是我是一个webpack深度恐惧者，从来没有配置成功过，哈哈，我只知道通过npx create的react-app默认是不显示webpack配置的，可以通过npm run eject可以将webpack配置显示
//终端运行命令 npm run eject
bye~
