classnames的库

import React, { PureComponent } from 'react'

import classNames from 'classnames'
export default class App extends PureComponent {
  constructor(props){
    super(props)
    this.state = {
      isActive:true,
    }
  }
  render() {
    const {isActive} = this.state
    const isBar = false;
    const errClass = "error";
    // undefiend和null不会加进下面的class
    return (
      <div>
        {/* classnames库添加class */}
        <h2 className= {classNames("foo","bar","active")}>我是标题x</h2>
        {/* 类似vue的写法 */}
        <h2 className={classNames( {"active": isActive,"bar":isBar},"title" )}>我是标题x</h2>
        <h2 className= {classNames("foo",errClass)}>我是标题x</h2>
        <h2>我是标题x</h2>
        <h2>我是标题x</h2>
      </div>
    )
  }
}

AntDesign的介绍

AntDesign ，简称 antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。中后台的产品属于工具性产品，很多优秀的设计团队通过自身的探索和积累，形成了自己的设计体系。

安装

yarn add antd

在antd中安装图标库

npm install --save @ant-design/icons

引用样式文件

import 'antd/dist/antd.css'

引用包过大的问题: antd 官网有提到:antd 的 JS 代码默认支持基于 ES modules 的 tree shaking，对于 js 部分，直接引入 import { Button } from 'antd' 就会有按需加载的效果。

使用craco来自定义主题

可以修改react脚手架相关的webpack配置。我们还可以用它来自定义主题，在antd官方文档中有介绍。

yarn add @craco/craco

修改package.json

新建一个这个文件，这就和vue.config.js很像了。

按照配置主题的要求，自定义主题需要用到类似 less-loader 提供的 less 变量覆盖功能。我们可以引入 craco-less 来帮助加载 less 样式和修改变量。

安装 craco-less：

yarn add craco-less

修改craco.config.js中的plugins，使用modifyVars可以在运行时修改LESS变量。

引入antd的样式时，引入antd.less文件。覆盖原来导入的css文件。

再重启就好了（改了配置文件必须重启）。

我们也可以配置别名，这个跟webpack里非常像，就不演示了。 craco.config.js

const CracoLessPlugin = require('craco-less');
const path = require("path");
const resolve = dir => path.resolve(__dirname, dir); //拼接出当前所在文件路径

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    }
  ],
  webpack: {
    alias: {
      "@": resolve("src"),
      "components": resolve("src/components")
    }
  }
}

React的AntDesgin组件库学习

classnames的库

AntDesign的介绍

使用craco来自定义主题