Перезагрузка страницы Ant Design css задержка рендеринга - PullRequest
Новая
       33

Перезагрузка страницы Ant Design css задержка рендеринга

0 голосов
/ 25 февраля 2020

Я использовал свой реагирующий проект TypeScript для ant-design , у меня возникла проблема при перезагрузке страницы, css loading delay, есть ли причины для этого?

Я импортировал свой main.css до 

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

Ответы [ 2 ]

3 голосов
/ 01 марта 2020

На самом деле, основываясь на и Design Do c о начале, вы можете использовать babel plugin для автоматизации c загрузки используемых компонентов, как показано ниже, это рекомендуется путь: 

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

Используя этот способ (из документов):

Это позволяет импортировать компоненты из antd без необходимости вручную импортировать соответствующие таблицы стилей. Плагин antd babel автоматически импортирует таблицы стилей.

Таким образом, вы можете легко импортировать компонент, и нет необходимости загружать CSS вручную, как показано ниже: 

import { Button } from 'antd';

Но Если вы не хотите использовать вышеуказанный плагин, вы можете использовать компонент Ant Desing, импортировав его CSS внутри каждого компонента, как показано ниже: 

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 или S CSS или 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 лучше импортировать его один раз в root проекта или система CSS.

СОВЕТ : я предпочитаю первое, используя плагин babel , это безопасно, более понятно и более читабельно.

2 голосов
/ 29 февраля 2020

Заменить 

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

на 

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

Это указано в документации, которую вы связали.

...