Antd组件库的使用

Antd组件库

简介

Ant Design 是蚂蚁金服提供的 React UI 组件库，主要用于研发企业级中后台产品。

Antd组件库在PC端React项目中为主流

pcd端 ： antd

app端 ：antd-mobile

官方文档：https://ant.design/docs/react/use-in-typescript-cn

快速构建

使用 create-react-app 创建一个 使用TypeScript和Less的项目，并引入 antd

1. 新构建一个项目(Ts and React)

$ yarn create react-app antd-demo-ts --template typescript

2. 不进行 yarn eject 配置文件抽离

3. 安装antd组件库

$ yarn add antd

4. 安装craco自定义配置插件

$ yarn add @craco/craco

4.1 修改 package.json文件

   // 将下面代码
    "scripts": {
         "start": "react-scripts  start",
         "build": "react-scripts  build",
         "test": "react-scripts  test"
    },
    // 修改为
    "scripts": {
         "start": "craco  start",
         "build": "craco  build",
         "test": "craco  test"
    },

4.2 创建 craco.config.js (项目根目录下)

   module.exports = {}

5. 安装less样式配置

$ yarn add craco-less less less-loader 

5.1 修改craco.config.js 文件

/*  !craco.config.js 以后将作为项目配置进行使用 */
const CracoLessPlugin = require("craco-less");

module.exports = {
   plugins: [
      {
         plugin: CracoLessPlugin,
         options: {
         cssLoaderOptions: {
            modules: { localIdentName: "[local]_[hash:base64:5]" }
         },
         lessLoaderOptions: {
            lessOptions: {
               modifyVars: {
               "@primary-color": "#1DA57A",
               "@link-color": "#1DA57A",
               "@border-radius-base": "2px"
               },
               javascriptEnabled: true
            }
         }
         }
      }
   ]
};

5.2 src下新建style.d.ts文件

该文件用于Ts中使用样式文件的类型声明

   // declare 声明 模块  css 
   declare module '*.css' {
      const classes: { readonly [key: string]: string }
      export default classes
   }
   declare module '*.less' {
      const classes: { readonly [key: string]: string }
      export default classes
   }
   declare module '*.scss' {
      const classes: { readonly [key: string]: string }
      export default classes
   }

5.3 在tsconfig.json中使用样式声明文件

// 在include中，添加剂style.d.ts
"include": [
    "src",
    "style.d.ts"
  ]

6 在项目中使用antd组件

// 引入antd组件
import { Button } from 'antd'

React中样式使用

1. 组件中局部样式

   import styles from 'xxx.less'
   <p className={ styles.box }></p>
   

   **注意：**局部样式将来渲染到界面时，类名后加了一串字符[hash转base64，然后取前5位]

      <p class="box_2Idt5"></p>
   

2. 全局样式 — 定义 :global{}

    :global{}
   

3. 全局样式 – 使用

   import 'xxx.less';
   <p className='box'></p>