[英]Ant-Design CSS not loading properly
我在使用 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';
只需在您的 jsx 文件或 js 文件中导入此文件:
如果您在 App.jsx 文件中导入一次,则无需在其他文件中导入
import "antd/dist/antd.css";
下面的导入用于我的 react 项目和 create-react-app cli
导入'antd/dist/antd.css',使用这个导入到你的根组件。
添加@import '~antd/dist/antd.css';
到 App.css 和 Index.css 之一/两者的顶部。
希望有帮助! 👍。
PS - 例如,如果您使用单个组件,请说输入,然后仅导入该部分。
导入 'antd/es/input/style/index.css';
不要从蚂蚁导入根的风格,因为它们包含一些全球性的风格,遗憾的是,会影响你的造型,无论如何,这是解决了很多次他们,但我仍然发现的唯一的解决办法是直接导入造型像组件这(用你的组件替换select
): import "antd/lib/select/style/index.css";
在您的 index.js 文件中,您可以导入 ant 样式文件:
import 'antd/dist/antd.css';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.