12. AntDesign

classNames

官方地址
classname可以让你在react项目中像Vue一样添加class

import React from "react";
import classNames from 'classnames'
class App extends React.Component {
  constructor(){
    super()
    this.state = {
      foo: true,
      isActive: true
    }
  }
  render(){
    const {foo, isActive} = this.state
    return (
    <div>
      {/* 常规 React 添加class方法 */}
      <h2 className={"hello " + (isActive ? "world" : "")}>标题1</h2>
      <h2 className="foo bar active title">标题1</h2>
      {/* 使用classnames */}
      <h2 className={classNames({hello: foo, active: isActive})}>标题1</h2>
      <h2 className={classNames('a', 'b', 'c')}>标题1</h2>
      <h2 className={classNames({hello: foo}, 'world')}>标题1</h2>
    </div>
  )}
}
export default App;

antd

安装 antd

yarn add antd

安装 antd icon

yarn add @ant-design/icons

在入口文件 index.js 中引入 antd 的样式文件

import 'antd/dist/antd.css'

基本使用，查看文档即可

import React from "react";
import { Button, Space } from 'antd';
import { PoweroffOutlined } from '@ant-design/icons'
class App extends React.Component {
  constructor(){
    super()
    this.state = {
      loadings: true
    }
  }
  render(){
    const {loadings} = this.state
    return (
    <>
      <Space style={{ width: '100%' }}>
        <Button type="primary" loading>
          Loading
        </Button>
        <Button type="primary" size="small" loading>
          Loading
        </Button>
        <Button type="primary" icon={<PoweroffOutlined />} loading />
      </Space>
    </>
    )
  }

antd 默认是支持 tree-shaking 的，不需做额外配置

使用Craco修改默认配置

官方文档
我们可以通过 yarn eject 修改 webpack 配置来修改antd的配置，但这样会带来不确定的问题
因此推荐使用 craco 来修改配置

具体操作参照官方文档即可

路径别名

我们还可以使用 craco 设置路径别名

const CracoLessPlugin = require('craco-less');
const path = require('path');
const resolve = dir => path.resolve(__dirname, dir);
module.exports = {
  plugins: [
     // ...
  ],
  webpack: {
    alias: {
      "@": resolve("src"),
      "components": resolve("src/components")
    }
  }
};

自定义样式

可以自己写CSS覆盖默认的样式

import { Button, Input } from "antd"
import styled from 'styled-components'
const {TextArea} = Input
const CutstomTextArea = styled(TextArea)`
  color: red;
  border: 3px dashed pink !important;
`
const CommentInput = () => {
  return (
    <div style={{padding:"0 20px"}}>
      <CutstomTextArea rows={4}/>
      <Button style={{
        background: 'pink', 
        color: 'white', 
        border: "1px solid pink",
        marginTop: 20,
        fontSize: 24,
        height: 60,
        width: 300,
        borderRadius: 30}}>发表评论</Button>
    </div>
  )
}
export default CommentInput

Dayjs的使用

dayjs是比moment更轻量级的库

• 使用 fromNow() 计算相对时间
• 使用 locale 设置显示的语言 ```javascript import {Comment, Tooltip, Avatar} from ‘antd’ import { DeleteOutlined } from ‘@ant-design/icons’ import * as dayjs from ‘dayjs’ import ‘dayjs/locale/zh-cn’ const relativeTime = require(‘dayjs/plugin/relativeTime’) dayjs.extend(relativeTime)

const CommentItem = (props) => { const { avatar, comment, user, createTime } = props.comment const actions = [ 删除 ] return (

export default CommentItem ```