Question

使用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';

但是，在第一个渲染上，它只会显示一个普通按钮，然后再修复第二个。这是两个显示问题的图像：

这是第二个渲染之后的页面：

Answer 1

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

Answer 2

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

import "antd/dist/antd.css";

Answer 3

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

在App.css和Index.css之一/两者的顶部。

希望有帮助！

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

导入'antd / es / input / style / index.css';

Answer 4

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

Answer 5

在你的 index.js 文件中，你可以导入蚂蚁样式文件：

import 'antd/dist/antd.css';

Ant-Design CSS无法正确加载

5 个答案: