我在使用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';
然而,在第一次渲染时,它只会显示一个正常的按钮,然后在一秒钟后自行修复。下面是两个显示问题的图像:
这是第二次渲染后的页面:
6条答案
按热度按时间mec1mxoz1#
只需将此文件导入到jsx文件或js文件中:
如果您在App.jsx文件中导入一次,则无需在其他文件中导入
qmelpv7a2#
以下导入用于我的react项目,带有create-react-app cli
import 'antd/dist/antd.css',将此导入用于根组件.
to94eoyn3#
将
@import '~antd/dist/antd.css';
相加到App.css和/或Index.css的顶部。
希望能帮上忙👍!
如果你使用的是一个单一的组件,比如说输入,那么只导入那个部分。
导入'antd/es/输入/样式/索引. css';
x759pob24#
不要从ant导入根样式,因为它们包含一些全局样式,不幸的是,无论如何都会影响您的样式,这对他们来说是addressed很多次,但我仍然发现唯一的解决方案是直接导入组件样式,如下所示(用您的组件替换
select
):import "antd/lib/select/style/index.css";
个pxy2qtax5#
在index.js文件中,可以导入ant样式文件:
6gpjuf906#
从本issue起,请使用缩小版。