Ant-Design CSS 未正确加载

关键词：

【中文标题】Ant-Design CSS 未正确加载【英文标题】：Ant-Design CSS not loading properly 【发布时间】：2019-07-11 04:24:24 【问题描述】：

我在使用 React.js 在第一次渲染时渲染我的 Ant-Design CSS 时遇到问题。我有一个非常基本的页面，它只是呈现一个按钮。

import React from 'react';

import  Button  from 'antd';

const LoginPage = () => 
    return (
        <div>
            <Button type="primary">Button</Button>
        </div>
    )
;

export default LoginPage;

我正在尝试按照文档通过 config-overrides.js 文件导入 Ant-Design 模块：

const  override, fixBabelImports  = require('customize-cra');

module.exports = override(
    fixBabelImports('import', 
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
    ),
);

这是我的 index.js 文件：

import  Provider  from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import  createStore, applyMiddleware  from 'redux';

import 'normalize.css';

import App from './components/App/App';
import reducers from './reducers';
import  fetchUser  from './actions';

import * as serviceWorker from './serviceWorker';

const store = createStore(reducers, applyMiddleware(thunkMiddleware));

store.dispatch(fetchUser()).then(() => console.log(store.getState()));


ReactDOM.render(
    <Provider store=store>
        <App />
    </Provider>,
    document.getElementById('root')
);

serviceWorker.unregister();

这里是我的 App.js 和 App.css 供更多参考：

import React,  Component  from 'react';
import LoginPage from '../LoginPage/LoginPage';
import DashboardPage from '../DashboardPage/DashboardPage';

import  Spin  from 'antd';

import './App.css';

import  connect  from 'react-redux';

class App extends Component 

    constructor(props)
        super(props);
        this.state = 
            loggedIn: false
        
    

    componentDidMount()
        this.setState(loggedIn: true );
    

    render() 
       return <LoginPage/>
    


const mapStateToProps = (state) => 
    console.log(state);
    return 
        user: state.currUser
    ;
;

export default connect(mapStateToProps)(App);

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

但是，在第一次渲染时，它只会显示一个普通按钮，然后在一秒钟后自行修复。这是显示问题的两张图片：

这是第二次渲染后的页面：

【问题讨论】：

【参考方案1】：

以下导入用于我的 react 项目与 create-react-app cli 导入 'antd/dist/antd.css', 使用此导入到您的根组件。

【讨论】：

根组件，是 App 还是 Provider（我用的是 Redux）？【参考方案2】：

只需将此文件导入您的 jsx 文件或 js 文件中即可：

如果在 App.jsx 文件中导入一次，则无需在其他文件中导入

import "antd/dist/antd.css";

【讨论】：

【参考方案3】：

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

到 App.css 和 Index.css 中的一个/两个的顶部。

希望对您有所帮助！ ?。

P.S - 如果您使用单个组件，例如输入，则仅导入该部分。

import 'antd/es/input/style/index.css';

【讨论】：

【参考方案4】：

不要从 ant 导入根样式，因为它们包含一些全局样式，不幸的是，无论如何都会影响你的样式，这对他们来说是addressed 很多次，但我仍然发现唯一的解决方案是直接导入这样的组件样式（将 select 替换为您的组件）： import "antd/lib/select/style/index.css";

【讨论】：

【参考方案5】：

在您的 index.js 文件中，您可以导入 ant 样式文件：

import 'antd/dist/antd.css';

【讨论】：

ant-design样式加载失败解决办法

参考技术A可能光是importantd是不够的，它虽然引用了antd，但是并没有自动加载对应的css样式，需要我们手动引入。 查看详情

webpackcss模块化和ant-design按需加载冲突

其实具体出现了什么问题，我也记得不清楚了，今天突然回想起来必须记录一下，一个思想就是用exclude将node_module目录下的文件排除，网上有很多相关例子，但不知是不是因为时间久远，都不生效，无奈，又只好啃回官方文档，... 查看详情

Django CSS 和 JavaScript 未加载

...搭建，Django文件在，依赖安装...静态CSS和JavaScript文件未正确加载。cPanel主机将passenger_wsgi.py放在我的Djan 查看详情

组件应答器的 CSS 未加载到特定组件内

...。网页组件允许创建iframe并在其中轻松设置一些内容。它正确加载了模板和脚本标签，但不是css（它不加载）。有时有效，但大多数时候无效。我以为是组件加载有问题，但不是。如果我 查看详情

Summernote v0.8.15 图标未加载

...03【问题描述】：我遇到了一个问题，即Summernote图标无法正确加载。我该怎么做？【问题讨论】：【参考方案1】：在summernote8.15中正确加载图标您需要将其包含在您的css/scss文件中ex.css/fonts.scss/*summernote8.15 查看详情

在页面加载动画上制作 css 的正确方法是啥？ [复制]

】在页面加载动画上制作css的正确方法是啥？[复制]【英文标题】：Whatistherightwaytomakeacssonpageloadanimation?[duplicate]在页面加载动画上制作css的正确方法是什么？[复制]【发布时间】：2015-07-3001:17:57【问题描述】：我的问题并不是关... 查看详情

表视图未正确加载

】表视图未正确加载【英文标题】：TableViewDoesn\'tloadproperly【发布时间】：2015-02-0510:55:48【问题描述】：我想建立一个圆形的个人资料图像。并使用了以下代码：//VoidfuncthatsetsthesetstylefuncsetCellStyle()//setborderWidthself.profileImageView.lay... 查看详情

“CPPCheck 插件包”包未正确加载

】“CPPCheck插件包”包未正确加载【英文标题】：The\'CPPCheckPluginPackage\'packagedidnotloadcorrectly【发布时间】：2015-06-2019:53:42【问题描述】：在MVS2013上安装CppcheckPlugin.vsix后出现“\'CPPCheckPluginPackage\'包未正确加载”。有人知道如何解... 查看详情

phpmyadmin 未正确加载

】phpmyadmin未正确加载【英文标题】：phpmyadminisnotloadingcorrectly【发布时间】：2019-11-0122:30:16【问题描述】：我尝试登录我的phpmyadmin（EC2实例）我尝试访问domain.com/phpmyadmin它没有加载然后我输入domain.com/phpmyadmin/index.php它加载。登... 查看详情

Pygame 未正确加载图像

】Pygame未正确加载图像【英文标题】：PygameNotLoadingImagesCorrectly【发布时间】：2016-02-1901:27:50【问题描述】：我将图像加载到我的项目中的方式在我学校的Windows机器上工作，但是当我回到家并在OpenSUSE上以相同格式编写一些代码... 查看详情

未检测到的 Chromedriver 未正确加载

】未检测到的Chromedriver未正确加载【英文标题】：UndetectedChromedrivernotloadingcorrectly【发布时间】：2021-04-0807:20:29【问题描述】：我正在尝试使用带有selenium的无头chrome浏览器，它也绕过了机器人检测测试，目前正在使用以下项目ht... 查看详情

角度材质未正确加载样式

】角度材质未正确加载样式【英文标题】：Angularmaterialnotloadingstylescorrectly【发布时间】：2019-05-1103:28:57【问题描述】：我正在使用Angular材料来构建表格这是我的表格组件：importComponent,AfterViewInit,ViewChildfrom\'@angular/core\';importMatTab... 查看详情

.xib 未正确加载（iPhone）

】.xib未正确加载（iPhone）【英文标题】：.xibnotloadingright(iPhone)【发布时间】：2009-10-3122:24:22【问题描述】：由于某种原因，当我（从.xib）加载新视图时，它会加载类文件，但不会加载.xib！！这是我的代码：login*lo=[[loginalloc]initW... 查看详情

图像未正确加载

】图像未正确加载【英文标题】：Imagesarenotloadingproperly【发布时间】：2016-10-1812:45:37【问题描述】：我有一个非常简单的iOS应用程序-它有TableView和这个TableView中的自定义单元格列表。每个单元格中都有一个ImageView（使用downloadedF... 查看详情

在 UIScrollView 中未正确加载 XIB

】在UIScrollView中未正确加载XIB【英文标题】：XIBisn\'tloadedproperlyinUIScrollView【发布时间】：2017-09-1710:44:37【问题描述】：我有一个带分页的滚动视图。在这个滚动视图中，我动态加载xibs。但是xib的高度应该和滚动视图一样。我的... 查看详情

移动方向更改未应用 CSS

...时遇到了问题。如果我以landscape模式加载页面，则会应用正确的CSS。当我更改为portrait时，CSS也是正确 查看详情

ImageNet 数据集图像未正确加载

】ImageNet数据集图像未正确加载【英文标题】：ImageNetdatasetimagesnotloadingproperly【发布时间】：2021-07-0101:03:51【问题描述】：我发现我们现在无法直接从Pytorch下载ImageNet数据集。我收到此错误：RuntimeError:Thedatasetisnolongerpubliclyaccessib... 查看详情

Glyphicon Bootstrap v3 未加载

...in.css。但我永远无法使用Glyphicon图标。我很确定我的CSS是正确的。下面是我的HTML。为什么？<spanclass="input-group-addon">& 查看详情