5
votes

Ant-Design CSS ne se charge pas correctement

J'ai un problème avec le rendu de mon CSS Ant-Design sur le premier rendu en utilisant React.js. J'ai une page très basique, qui ne fait que rendre un bouton.

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

J'essaye d'importer les modules Ant-Design via le fichier config-overrides.js, comme indiqué dans la documentation:

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

Voici mon fichier 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();

Et voici mon App.js et App.css pour plus de références:

const { override, fixBabelImports } = require('customize-cra');

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

import React from 'react';

import { Button } from 'antd';

const LoginPage = () => {
    return (
        <div>
            <Button type="primary">Button</Button>
        </div>
    )
};

export default LoginPage;

Cependant, sur le premier rendu, il ne montrera qu'un bouton normal, avant de se réparer une seconde plus tard. Voici deux images qui montrent le problème:

Et voici la page après le deuxième rendu:

javascript reactjs css antd

0 commentaires

4 Réponses :

4
votes

cet import ci-dessous est utilisé dans mon projet react avec le cli create-react-app
importer 'antd / dist / antd.css', utilisez cette importation dans votre composant racine.

1 commentaires

Par composant racine, serait-ce une application ou un fournisseur (j'utilise Redux)?

11
votes

Importez simplement ce fichier dans votre fichier jsx ou js: Importez-le simplement une fois dans le fichier App.jsx!

import "antd/dist/antd.css";

0 commentaires

1
votes

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

En haut de l'un / l'autre de App.css et Index.css.

J'espère que cela aide! 👍.

P.S - Si vous utilisez un seul composant par exemple, disons Input, importez uniquement cette partie.

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

0 commentaires

0
votes

N'importez PAS les styles racine de ant, car ils contiennent malheureusement des styles globaux et affecteront le vôtre de toute façon, c'était leur a été adressé plusieurs fois, mais j'ai toujours trouvé que la seule solution était d'importer directement le style des composants comme celui-ci (remplacez sélectionnez avec votre composant): import "antd / lib / select / style / index.css";

0 commentaires