React学习-UI框架-Ant-Design-of-React

React学习-UI框架-Ant-Design-of-React

Ant-design-react官网

https://ant.design/docs/react/introduce-cn

使用npm命令安装antd

npm install antd --save

或使用yarn命令

yarn add antd

实现第一个按钮

import React,{Component} from 'react'
import 'antd/dist/antd.css';
import {Button} from 'antd'
export default class App extends Component{
  render(){
    return (
        <div>
          <Button type="primary">Primary Button</Button>
        </div>
    )
  }
}

我们使用局部引入

实现的效果

如果有下面这种报错

就把/src/index.js中的React.StrictMode标签去掉

 <React.StrictMode>
   <App />
 </React.StrictMode>,

👇改成

   <App />,

其他在项目开发中比较好用的还有Grid栅格

<Row>
  <Col span={8}>col-8</Col>
  <Col span={8} offset={8}>
    col-8
  </Col>
</Row>

• span：表示栅格占位格数，为 0 时相当于 display: none
• offset：栅格左侧的间隔格数，间隔内不可以有栅格
• flex：flex 布局属性
  比较常用的是这些，其余的api可以自行去参考官方文档