使用App和antd

Question

我试图将安特与创建react应用程序结合使用。

我在项目中安装了antd

yarn add antd

使用antd的按钮组件添加了一个按钮

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;

尽管如此，纽扣仍未正确呈现。在检查元素时，我发现antd类正在应用。只是css没有被加载。

Answer 1

我不得不在src/App.css的顶部添加antd/dist/antd.css。

@import '~antd/dist/antd.css';

.App {
  text-align: center;
}

我从与一起使用的antd官方文档那里算出来的

因此，所有所需的步骤都是安装antd。

yarn add antd

使用来自antd的组件

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;

并在主css文件(src/App.css)中导入antdcss。

Answer 2

在项目中安装antd之后，您可以将按钮导入为

从‘antd’导入{Button}；

Answer 3

首先通过npm i less-loader在npm上安装较少的加载程序，然后在index.js目录上创建一个index.less文件夹。将此文件粘贴到index.less -> @import "~antd/dist/antd.dark.less";上，然后将该.less文件导入到index.js中，并获得乐趣:)您可以找到其他一些方法这里

您也可以使用craco(创建react配置覆盖)，但它更复杂。