Bootstrap установлен в приложении ReactJS, но стиль отсутствует - PullRequest
1 голос
/ 10 ноября 2019

Я новичок в ReactJS

Я создал дочерний компонент с именем footer, а также установил пакет Bootstrap, но не получил никакого стиля в нижнем колонтитуле.

Code App.js -

import React, { Component }from 'react';
import './App.css';
import Header from './components/header';
import Footer from './components/footer';

class App extends Component {
    render() {
        return (
            <div>
                <Header />
                <Footer />
            </div>
        );
    }
}

export default App;

Footer.js в папке компонентов

import React from 'react';

const Footer = () => {

    return (
        <footer className="page-footer font-small blue">
            <div className="footer-copyright text-center py-3">© 2019 Copyright:
                <a href="http://www.google.co.uk/">Test.com</a>
            </div>
        </footer>
    );
};

export default Footer;

index.js -

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.register();

Но в нижнем колонтитуле нет стиля.

ЛюбойПомощь высоко ценится.

Ответы [ 2 ]

0 голосов
/ 10 ноября 2019

В вашем app.css импортируйте bootstrap.css следующим образом

import 'bootstrap/dist/css/bootstrap.css';

Затем перезапустите сервер

0 голосов
/ 10 ноября 2019

Ну, проблема в том, что вы не импортировали загрузчик должным образом, у вас есть ошибки импорта в вашей консоли?

import 'bootstrap/dist/css/bootstrap.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

попробуйте импортировать один из них, как написано выше.

...