前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React---antd的按需引入和自定义主题

React---antd的按需引入和自定义主题

作者头像
半指温柔乐
发布2021-04-29 15:38:27
2.4K1
发布2021-04-29 15:38:27
举报
文章被收录于专栏:前端知识分享前端知识分享

一、antd的按需引入+自定义主题

1.安装依赖:npm install react-app-rewired customize-cra babel-plugin-import less less-loader antd

2.修改package.json

....

"scripts": {

"start": "react-app-rewired start",

"build": "react-app-rewired build",

"test": "react-app-rewired test",

"eject": "react-scripts eject"

},

....

3.根目录下创建config-overrides.js

代码语言:javascript
复制
 1 const { override, fixBabelImports,addLessLoader} = require('customize-cra');
 2 
 3 module.exports = override(
 4   fixBabelImports('import', {
 5     libraryName: 'antd',
 6     libraryDirectory: 'es',
 7     style: true,
 8     }),
 9     addLessLoader({
10         lessOptions:{
11             javascriptEnabled: true,
12             modifyVars: { '@primary-color': 'green' },
13         }
14     }),
15 );

4. antd组件库的使用

代码语言:javascript
复制
 1 import React, { Component } from 'react'
 2 import { Button,DatePicker } from 'antd';
 3 import {WechatOutlined,WeiboOutlined,SearchOutlined} from '@ant-design/icons'
 4 const { RangePicker } = DatePicker;
 5 
 6 export default class App extends Component {
 7     render() {
 8         return (
 9             <div>
10                 App....
12                 <Button type="primary">按钮1</Button>
13                 <Button >按钮2</Button>
14                 <Button type="link">按钮3</Button>
15                 <Button type="primary" icon={<SearchOutlined />}>
16                     Search
17                 </Button>
18                 <WechatOutlined />
19                 <WeiboOutlined />
20                 <DatePicker/>
21                 <RangePicker/>
22             </div>
23         )
24     }
25 }

4.备注:不用在组件里亲自引入样式了,即:import 'antd/dist/antd.css'应该删掉

二、UI库

1. material-ui(国外)

  1. 官网: http://www.material-ui.com/#/
  2. github: https://github.com/callemall/material-ui

2. ant-design(国内蚂蚁金服)

  1. 官网: https://ant.design/index-cn
  2. Github: https://github.com/ant-design/ant-design/
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021-04-27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、antd的按需引入+自定义主题
  • 二、UI库
  • 1. material-ui(国外)
  • 2. ant-design(国内蚂蚁金服)
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档