$create-react-app demo // initializes scaffolding and installs dependencies, with demo as project name $cd$NPM start $NPM startCopy the code

$ npm install --save antdCopy the code

1. Introduce CSS forms using ANTD components

Modify SRC/app.js to introduce antD button component:

import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button> </div> ); }}export default App;Copy the code

Add antd/dist/antd. CSS at the top of the file:

@import '~antd/dist/antd.css';Copy the code



2, advanced configuration, load on demand

By introducing CSS forms, you actually load the entire ANTD component style, and then use some of the component style, which consumes performance. Customize the default configuration of create-react-app to make ANTD load on demand.

$NPM install --save react-app-rewired customize-cra $NPM install --save babel-plugin-import // load the component code and styles as neededCopy the code

Modify package.json file:

"scripts": {
    "start": "react-app-rewired start"."build": "react-app-rewired build"."test": "react-app-rewired test"."eject": "react-app-rewired eject"
},Copy the code


Create config-overrides. Js file in the root directory of the project to modify the default configuration:

const { override, fixBabelImports } = require("customize-cra");
module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: "css"}));Copy the code

Remove import from SRC/app.css: @import ‘~antd/dist/antd.css’;

Alter SRC/app.js to introduce antD button component:

import React, { Component } from "react";
// import Button from 'antd/lib/button';
import { Button } from "antd";
import "./App.css";
class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button> </div> ); }}export default App;Copy the code





3. Customize themes

Ant. Design /docs/react/…