title: Ant-Design CSS not loading properly
body: <p>I am having an issue with rendering my Ant-Design CSS on the first-render using React.js. I have a very basic page, that is just rendering a button.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  
  import { Button } from 'antd';
  
  const LoginPage = () =&gt; {
      return (
          &lt;div&gt;
              &lt;Button type="primary"&gt;Button&lt;/Button&gt;
          &lt;/div&gt;
      )
  };
  
  export default LoginPage;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to import the Ant-Design modules through the config-overrides.js file, as per the documentation:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const { override, fixBabelImports } = require('customize-cra');
  
  module.exports = override(
      fixBabelImports('import', {
          libraryName: 'antd',
          libraryDirectory: 'es',
          style: 'css',
      }),
  );</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is my index.js file: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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(() =&gt; console.log(store.getState()));
  
  
  ReactDOM.render(
      &lt;Provider store={store}&gt;
          &lt;App /&gt;
      &lt;/Provider&gt;,
      document.getElementById('root')
  );
  
  serviceWorker.unregister();</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is my App.js and App.css for more reference:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt;LoginPage/&gt;
      }
  }
  
  const mapStateToProps = (state) =&gt; {
      console.log(state);
      return {
          user: state.currUser
      };
  };
  
  export default connect(mapStateToProps)(App);</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import '~antd/dist/antd.css';</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, on the first render it will only show a normal button, before fixing itself a second later. Here are two images that show the problem:
  <a href="https://i.stack.imgur.com/AvmwG.png" rel="noreferrer"><img src="https://i.stack.imgur.com/AvmwG.png" alt="Image One - First Render"></a></p>
  
  <p>And here is the page after the second render:
  <a href="https://i.stack.imgur.com/XUnAW.png" rel="noreferrer"><img src="https://i.stack.imgur.com/XUnAW.png" alt="Image Two - Second Render"></a></p>