在ReactJS应用中安装了Bootstrap但没有样式

我是ReactJS的新手

我创建了一个称为页脚的子组件,并安装了Bootstrap程序包,但是页脚没有收到任何样式。

代码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();

但是页脚中没有样式。

我们非常感谢您的帮助。

WAGXZ 回答:在ReactJS应用中安装了Bootstrap但没有样式

好吧,问题在于您没有正确导入引导程序,控制台中是否存在导入错误?

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

尝试通过上面写的我之一导入。

,

在您的app.css中,这样导入bootstrap.css

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

然后重新启动服务器

,

这只是意味着您没有正确导入引导程序,我不知道您的代码结构如何,所以我建议您使用下面的CDN版本并将其链接到index.html文件中。

<link

rel =“ stylesheet” href =“ https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css” 完整性=“ sha384-Vkoo8x4CGsO3 + Hhxv8T / Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh” crossorigin =“ anonymous” />

这意味着您每次使用都必须在线。 我建议的另一个选择是您使用reactstrap,对于初学者来说这会更容易。通过使用npm install --save reactstrap进行安装,然后可以使用任何所需的组件。您在Google文档中搜索了更多详细信息。

本文链接:https://www.f2er.com/3129270.html

大家都在问