ant design官网

Ant Design由蚂蚁金服提供 移动端 antd-mobile PC端 antd

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

在TypeScript中使用

引入 antd

$ yarn add antd

高级配置

需要对 create-react-app 的默认配置进行自定义，这里我们使用 craco (一个对 create-react-app 进行自定义配置的社区解决方案)
安装craco并修改 package.json 里的 scripts 属性

yarn add @craco/craco

image.png
然后在项目的根目录创建一个 craco.config.js 用于修改默认配置
安装 craco-antd并修改 craco.config.js 文件如下

$ yarn add craco-less

  1. const CracoLessPlugin = require('craco-less');
  3. module.exports = {
  4.     plugins: [
  5.         {
  6.             plugin: CracoLessPlugin,
  7.             options: {
  8.                 lessLoaderOptions: {
  9.                     lessOptions: {
  10.                         modifyVars: { '@primary-color': '#1DA57A' },
  11.                         javascriptEnabled: true,
  12.                     },
  13.                 },
  14.                 cssLoaderOptions: { // npn craco-less CSS Modules中
  15.                     modules: { localIdentName: "[local]_[hash:base64:5]" }
  16.                 },
  17.             },
  18.         },
  19.     ],
  20. };

使用

src/index.tsx文件中引入antd的样式库

import ‘antd/dist/antd.css’

组件中使用 需要根据官网的组件进行导入使用

  1. import {Component} from 'react'
  2. import{Spin} from 'antd'
  3. export default class App extends Component{
  4.   render(){
  5.     return(
  6.       <>
  7.       <Spin />
  8.       </>
  9.     )
  10.   }
  11. }

引入less局部样式

ts中引入less也需要类型声明
src/type-css.d.ts (xxx.d.ts 是类型声明文件)

  1. declare module '*.less' {
  2.     const classes: {
  3.         readonly [key: string]: string
  4.     }
  5.     export default classes
  6. }

在 项目目录/tsconfig.json 中添加一个选项 并且使用less的类型声明文件

“experimentalDecorators”: true “include”: [ “type-css.d.ts”

]