Ant design 页面重新加载 css 渲染延迟

Question

我为 ant-design 使用了我的 React TypeScript 项目，我在重新加载页面时遇到了一些问题，css loading delay，有什么原因吗？

我将 main.css 导入到

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

Answer 1

替换

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

和

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

这在您链接的文档中给出。

Answer 2

实际上，基于And Design Doc about getting a start, You could use babel plugin自动加载如下使用的组件，推荐方式：

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` for less
  ]
}

通过这种方式（来自文档）：

This allows you to import components from antd without having to manually import the corresponding stylesheet. The antd babel plugin will automatically import stylesheets.

因此您可以轻松导入组件，无需手动加载 CSS，如下所示：

import { Button } from 'antd';

但是如果你不想使用上面的插件，你可以通过在每个组件中导入它的CSS来使用Ant Desing组件，如下所示：

import React from 'react';
import Button from 'antd/es/button';
import 'antd/es/button/style/css'; // <<=== this way
import './CustomButton.css';

const CustomButton = () => (
  <div className="custom-button">
    <Button type="primary">
      Button
    </Button>
  </div>
);

还有另一种方法，使用您自己的CSS或SCSS或LESS，但在您的组件CSS系统的顶部导入组件CSS ，就像下面完全一样的文档：

// the custom component
import React from 'react';
import Button from 'antd/es/button';
import './CustomButton.css';

const CustomButton = () => (
  <div className="custom-button">
    <Button type="primary">
      Button
    </Button>
  </div>
);

// the CustomButton.css file
@import '~antd/es/button/style/css';

.custom-button {
  background-color: red; // for example
}

此外，您可以使用整个 Ant Design CSS 而不是单独使用每个组件。我的意思是：

import 'antd/dist/antd.css';

而不是这个：

import 'antd/es/button/style/css';

这种加载方式CSS，最好在项目根目录或者CSS系统中导入一次

提示：我更喜欢第一种，使用babel plugin，安全，更清晰，更易读。

Ant design 页面重新加载 css 渲染延迟

Ant design page reloading css rendering delay

reactjs

antd

react-typescript