Antd组件库

Antd组件库

antd的基本使用

​ yarn add antd

​

import React, { Component } from 'react'
import { Button } from 'antd';
import 'antd/dist/antd.css';
export default class App extends Component {
  render() {
    return (
      <div>
        <Button>我是antd的按钮哦</Button>
      </div>
    )
  }
}

antd的高级配置

​ 前提需要安装react-app-rewired / customize-cra

​ 需要配置package.json 增加一个文件config-overrides.js

​ 再去安装 yarn add babel-plugin-import

​ 找到config-overrides.js文件

const {
    addDecoratorsLegacy,
    override,
    fixBabelImports
} = require("customize-cra");

module.exports = override(
    addDecoratorsLegacy(),
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
    })
)

​

​ 现在从antd组件库里面引入组件，那么组件就拥有各自的样式了。

import React, { Component } from 'react'
import { Button } from 'antd';
export default class App extends Component {
  render() {
    return (
      <div>
        <Button>我是antd的按钮哦</Button>
      </div>
    )
  }
}

​

antd的自定义主题

1. yarn add less less-loader -D

2. 修改了config-overrides文件

    const {
        addDecoratorsLegacy,
        override,
        fixBabelImports,
        addLessLoader
    } = require("customize-cra");
    
    module.exports = override(
        addDecoratorsLegacy(),
        fixBabelImports('import', {
            libraryName: 'antd',
            libraryDirectory: 'es',
            style: true,  //一定要把style变成true!
        }),
        addLessLoader({
            javascriptEnabled: true,
            modifyVars: { '@primary-color': '#090' },
        }),
    )

3. 单独抽离theme.js文件

   module.exports = {
       '@primary-color':' #090', // 全局主色
       '@link-color':' #1890ff', // 链接色
       '@success-color':' #52c41a', // 成功色
       '@warning-color':' #faad14', // 警告色
       '@error-color':' #f5222d', // 错误色
       '@font-size-base':' 14px', // 主字号
       '@heading-color':' rgba(0, 0, 0, 0.85)', // 标题色
       '@text-color':' rgba(0, 0, 0, 0.65)', // 主文本色
       '@text-color-secondary':' rgba(0, 0, 0, 0.45)', // 次文本色
       '@disabled-color':' rgba(0, 0, 0, 0.25)', // 失效色
       '@border-radius-base':' 4px', // 组件/浮层圆角
       '@border-color-base':' #d9d9d9', // 边框色
       '@box-shadow-base':' 0 2px 8px rgba(0, 0, 0, 0.15)', // 浮层阴影
   }

import modifyVars from "./theme"
addLessLoader({
    javascriptEnabled: true,
    modifyVars
}),