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 未正确加载的主要内容,如果未能解决你的问题,请参考以下文章
Webview android中的Paypal支付页面布局损坏可能css未正确加载?