Ant-Design CSS 加载不正确

Question

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.

 import React from 'react'; import { Button } from 'antd'; const LoginPage = () => { return ( <div> <Button type="primary">Button</Button> </div> ) }; export default LoginPage;

I am trying to import the Ant-Design modules through the config-overrides.js file, as per the documentation:

 const { override, fixBabelImports } = require('customize-cra'); module.exports = override( fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css', }), );

Here is my index.js file:

 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();

And here is my App.js and App.css for more reference:

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

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:

And here is the page after the second render:

Answer 1

Just import this file in your jsx file or js file:

If you import it in App.jsx file once then no need to import in other files

import "antd/dist/antd.css";

Answer 2

this below import is used my react project with create-react-app cli
import 'antd/dist/antd.css', use this import to your root component.

Answer 3

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

To the top of either/both of App.css and Index.css.

Hope that helps! 👍.

PS - If you are using a single component for instance lets say Input, then import only that part.

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

Answer 4

不要从蚂蚁导入根的风格，因为它们包含一些全球性的风格，遗憾的是，会影响你的造型，无论如何，这是解决了很多次他们，但我仍然发现的唯一的解决办法是直接导入造型像组件这（用你的组件替换select ）： import "antd/lib/select/style/index.css";

Answer 5

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

import 'antd/dist/antd.css';