React UI框架Antd 以及如何按需引入css样式配置（以及过程中各种错误处理方案）

sunshine_程序媛

已于 2024-02-28 11:28:01 修改

阅读量2.1k

点赞数 9

文章标签： react.js ui css

于 2024-02-27 17:01:41 首次发布

本文链接：https://blog.csdn.net/weixin_43052839/article/details/136326714

版权

一、react UI框架Antd使用

1.下载模块

npm install antd -S

2.引入antd的样式

@import '../node_modules/antd/dist/reset.css';

3.局部使用antd组件

import {Button, Calendar} from 'antd';
import {PieChartTwoTone} from '@ant-design/icons';
{/* 组件汉化配置 */}
import locale from 'antd/lib/calendar/locale/zh_CN';
<Calendar locale={locale} cellRender={ cellRender } />
<Button>antd按钮-默认</Button>
<Button type='primary'>antd按钮-主要</Button>
<Button type='primary' danger>antd按钮-危险</Button>
{/* 内嵌样式直接修改 */}
<Button type='dashed' danger style={
  {border:'1px dashed #78bd70'}} >antd按钮-dashed危险</Button>
<Button type='link' danger >antd按钮-link危险</Button>
<Button type='text' danger >antd按钮-text危险</Button>
<PieChartTwoTone twoToneColor="#eb2f96" spin={true} style={
  {fontSize:'50px'}}/>

// 在index.js中配置汉化语音包
// 汉化 语言包 4.0
npm install moment -S
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
// 汉化 语言包 5.0
import dayj