{"id":26058,"date":"2022-12-15T06:58:00","date_gmt":"2022-12-15T01:28:00","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-ant-design-page-reloading-css-rendering-delay\/"},"modified":"2022-12-15T06:58:00","modified_gmt":"2022-12-15T01:28:00","slug":"solved-ant-design-page-reloading-css-rendering-delay","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-ant-design-page-reloading-css-rendering-delay\/","title":{"rendered":"[Solved] Ant design page reloading css rendering delay"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

Actually, based on And Design Doc<\/a> about getting a start, You could use babel plugin<\/a> for automatic loading used components like below, it is a recommended<\/strong> way:<\/p>\n

\/\/ .babelrc or babel-loader option\n{\n  \"plugins\": [\n    [\"import\", { \"libraryName\": \"antd\", \"libraryDirectory\": \"es\", \"style\": \"css\" }] \/\/ `style: true` for less\n  ]\n}\n<\/code><\/pre>\n
By using this way (from docs):<\/p>\n
\n
This allows you to import components from antd without having to manually import the corresponding stylesheet. The antd babel plugin will automatically import stylesheets.<\/p>\n<\/blockquote>\n
So you can import the component easily and there is no need to load CSS manually, just like below:<\/p>\n
import { Button } from 'antd';\n<\/code><\/pre>\n
But<\/strong> if you don’t want to use the above plugin, you can use Ant Desing component by importing its CSS inside each component like below:<\/p>\n
import React from 'react';\nimport Button from 'antd\/es\/button';\nimport 'antd\/es\/button\/style\/css'; \/\/ <<=== this way\nimport '.\/CustomButton.css';\n\nconst CustomButton = () => (\n  <div className=\"custom-button\">\n    <Button type=\"primary\">\n      Button\n    <\/Button>\n  <\/div>\n);\n<\/code><\/pre>\n
And there is another way, use your own CSS or SCSS or LESS, but import the component CSS at the top of your component CSS system, just like below exactly like docs:<\/p>\n
\/\/ the custom component\nimport React from 'react';\nimport Button from 'antd\/es\/button';\nimport '.\/CustomButton.css';\n\nconst CustomButton = () => (\n  <div className=\"custom-button\">\n    <Button type=\"primary\">\n      Button\n    <\/Button>\n  <\/div>\n);\n<\/code><\/pre>\n
\/\/ the CustomButton.css file\n@import '~antd\/es\/button\/style\/css';\n\n.custom-button {\n  background-color: red; \/\/ for example\n}\n<\/code><\/pre>\n
Also, you can use the whole Ant Design CSS instead of using separately each component. I mean this:<\/p>\n
import 'antd\/dist\/antd.css';\n<\/code><\/pre>\n
Instead of this:<\/p>\n
import 'antd\/es\/button\/style\/css';\n<\/code><\/pre>\n
For this way of loading CSS, it is better to import it once at the root of the project or the CSS system.<\/p>\n
HINT<\/strong>: I prefer the first, using babel plugin<\/a>, it is safe, more clear and more readable.<\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            <\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved Ant design page reloading css rendering delay <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] Actually, based on And Design Doc about getting a start, You could use babel plugin for automatic loading used components like below, it is a recommended way: \/\/ .babelrc or babel-loader option { “plugins”: [ [“import”, { “libraryName”: “antd”, “libraryDirectory”: “es”, “style”: “css” }] \/\/ `style: true` for less ] } By using this … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[5330,5165,784],"class_list":["post-26058","post","type-post","status-publish","format-standard","hentry","category-solved","tag-antd","tag-react-typescript","tag-reactjs"],"yoast_head":"\n[Solved] Ant design page reloading css rendering delay - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-ant-design-page-reloading-css-rendering-delay\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Ant design page reloading css rendering delay - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Actually, based on And Design Doc about getting a start, You could use babel plugin for automatic loading used components like below, it is a recommended way: \/\/ .babelrc or babel-loader option { "plugins": [ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] \/\/ `style: true` for less ] } By using this ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-ant-design-page-reloading-css-rendering-delay\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-15T01:28:00+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-ant-design-page-reloading-css-rendering-delay\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-ant-design-page-reloading-css-rendering-delay\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Ant design page reloading css rendering delay\",\"datePublished\":\"2022-12-15T01:28:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-ant-design-page-reloading-css-rendering-delay\/\"},\"wordCount\":212,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"antd\",\"react-typescript\",\"reactjs\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-ant-design-page-reloading-css-rendering-delay\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-ant-design-page-reloading-css-rendering-delay\/\",\"name\":\"[Solved] Ant design page reloading css rendering delay - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-12-15T01:28:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-ant-design-page-reloading-css-rendering-delay\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-ant-design-page-reloading-css-rendering-delay\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-ant-design-page-reloading-css-rendering-delay\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Ant design page reloading css rendering delay\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Ant design page reloading css rendering delay - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-ant-design-page-reloading-css-rendering-delay\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Ant design page reloading css rendering delay - JassWeb","og_description":"[ad_1] Actually, based on And Design Doc about getting a start, You could use babel plugin for automatic loading used components like below, it is a recommended way: \/\/ .babelrc or babel-loader option { \"plugins\": [ [\"import\", { \"libraryName\": \"antd\", \"libraryDirectory\": \"es\", \"style\": \"css\" }] \/\/ `style: true` for less ] } By using this ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-ant-design-page-reloading-css-rendering-delay\/","og_site_name":"JassWeb","article_published_time":"2022-12-15T01:28:00+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-ant-design-page-reloading-css-rendering-delay\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-ant-design-page-reloading-css-rendering-delay\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Ant design page reloading css rendering delay","datePublished":"2022-12-15T01:28:00+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-ant-design-page-reloading-css-rendering-delay\/"},"wordCount":212,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["antd","react-typescript","reactjs"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-ant-design-page-reloading-css-rendering-delay\/","url":"https:\/\/jassweb.com\/solved\/solved-ant-design-page-reloading-css-rendering-delay\/","name":"[Solved] Ant design page reloading css rendering delay - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-12-15T01:28:00+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-ant-design-page-reloading-css-rendering-delay\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-ant-design-page-reloading-css-rendering-delay\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-ant-design-page-reloading-css-rendering-delay\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Ant design page reloading css rendering delay"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/26058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=26058"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/26058\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=26058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=26058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=26058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}