Ant-Design CSS 未正确加载

Posted

技术标签:

【中文标题】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 CSS 未正确加载的主要内容,如果未能解决你的问题,请参考以下文章

antd v3 升级 v4

Webview android中的Paypal支付页面布局损坏可能css未正确加载?

文件未从github主机正确加载

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

如何在 ant-design 组件中使用 css-in-js?

Summernote v0.8.15 图标未加载