Ant-Design CSSが正しくロードされていません

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'; _

ただし、最初のレンダリングでは、後で自分自身を固定する前に通常のボタンのみが表示されます。これは問題を示す2つの画像です：

そしてここで2番目のレンダリング後のページは次のとおりです.

Answer 1

追加 @import '~antd/dist/antd.css'; _

App.cssとindex.cssのどちらか/両方の上にあります。

それが助けてくれることを願っています！ ????.

P.S - たとえば単一のコンポーネントを使用している場合は、入力を入力してからその部分のみをインポートします。

アント/ es/input/style/index.css 'をインポートします。