使用UI组件库antd

npm install --save antd，安装antd。
App.js中引入antd的样式文件，引入antd的Button组件。

import React, { Component } from 'react'
import { Button } from 'antd';// import 'antd/dist/antd.css';
import 'antd/dist/antd.min.css'export default class App extends Component {render() {return (<div><button>点我</button>&nbsp;<Button type="primary">按钮1</Button>&nbsp;<Button type="default">按钮2</Button>&nbsp;<Button type="link">按钮4</Button></div>)}
}

导入antd的css文件：antd/dist/antd.css时，npm start 启动应用时遇到如下警告：
Failed to parse source map: ‘webpack://antd/./components/time-picker/style/index.less’ URL is not supported
所以改用了antd/dist/antd.min.css。

App.js从antd的子库@ant-design/icons中引入图标组件，如微信图标、微博图标。

import React, { Component } from 'react'
import { Button } from 'antd';
import {WechatOutlined,WeiboOutlined} from '@ant-design/icons'import 'antd/dist/antd.min.css'export default class App extends Component {render() {return (<div><button>点我</button>&nbsp;<Button type="primary">按钮1</Button>&nbsp;<Button type="default">按钮2</Button>&nbsp;<Button type="link">按钮4</Button>&nbsp;<WechatOutlined />&nbsp;<WeiboOutlined /></div>)}
}

使用UI组件库antd相关推荐

引入antd组件样式_扩大团队技术影响力，搭建团队自己的 UI 组件库
一.技术栈我们先简单了解一下要搭建一个团队的 UI 组件库,会涉及到哪些技术栈: Create React App:官方支持的 CLI 脚手架,提供一个零配置的现代构建设置: React: 用于构建 ...
2022-04-05 学习记录--React-React UI组件库-ant-design（蚂蚁金服）—— 按需引入样式 + 自定义主题
一.流行的开源React UI组件库流行的开源React UI组件库 material-ui(国外) 1.官网:http://www.material-ui.com/#/ 2.github:http ...
一些热门的前端UI组件库(附用例)
1.Vuetify(Vue) Vuetify 官网是一个纯手工精心打造的 Material 样式的 Vue UI 组件库. 不需要任何设计技能 - 创建叹为观止的应用程序所需的一切都触手可及. 这是 ...
【独立篇】React UI组件库
文章目录 1.React UI组件库 1.1.material-ui(国外) 1.2.ant-design(国内蚂蚁金服-antd) 2.AntD的简单使用 2.1.CODE 2.2.Result 1 ...
搭建前端UI组件库（一）—— 构思
本文讲述了搭建组件库前期的准备工作.主要是为了更了解UI组件库相关的知识. 这是自己边看边想边构思写的文档(俗话说知己知彼才能百战百胜嘛)所以先了解一下组件库的相关知识.开发的干货在第二章(还没放上来 ...
React UI 组件库 Chakra UI - 01 v1.0介绍和快速使用
Chakra UI Chakra UI 是简单.模块化和可访问的 UI 组件库. 本文 Chakra UI 版本:v1.6.2 基于 React 和 Emotion(CSS-IN-JS 方案库) 基于 ...
制作自己的ui组件库
制作一个类似antd的ui组件库并发布到npm上 1.注册一个npm账号官网 https://www.npmjs.com/signup 2.使用webpack babelrc搭建一个框架 Webpa ...
7 款最棒的 React 移动端 UI 组件库 - 特别针对国内使用场景推荐
本文完整版:<7 款最棒的 React 移动端 UI 组件库 - 特别针对国内使用场景推荐> React 移动端 UI 组件库 1. Taro UI for React - 京东出品,多端 ...
LCUI.css 0.1.2 发布，基于 LCUI 开发的 UI 组件库
开发四年只会写业务代码,分布式高并发都不会还做程序员? >>> LCUI.css 是一个适用于 LCUI 应用程序的 UI 组件库,使用 C 语言编写,提供了一些通用的组件和 c ...

使用UI组件库antd

使用UI组件库antd相关推荐

最新文章

热门文章