如何在 React 项目上安装 Bootswatch 主题？

Question

我创建了一个 React 项目，我想在它上面安装一个 bootswatch 主题。

主题是显示，但其中一些使用 js 的组件不起作用。像模态或下拉菜单。

我跟着那里安装文档： - npm 安装 bootswatch - 导入它的 css 文件

我也尝试安装引导程序但没有结果，主题不直接使用他们的组件。

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import '../node_modules/bootswatch/dist/lux/bootstrap.css';
import './index.css';
import './component/header.js';
import Header from './component/header.js'

class Structure extends React.Component{
    render() {
      return (
        <div className="structure">
          <Header/>
        </div>
      );
    }
  }

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

header.js：

import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Login from '../page/login-page.js';
import Consultation from '../page/consultation.js';
import Consulation2 from '../page/consultation2.js';
import Consulation3 from '../page/consultation3.js';
import Consulation4 from '../page/consultation4.js';
import Logo from '../img/logo.png';

export default class Header extends React.Component{
      render(){
        return (
          <Router>
              <nav className="navbar navbar-expand-lg navbar-light bg-light" >
                <img src={Logo} className="logo" alt="Logo" />
                <a className="navbar-brand" href="#"> Marie-France Group</a>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
                  <span className="navbar-toggler-icon"></span>
                </button>

                <div className="collapse navbar-collapse" id="navbarColor02">
                  <ul className="navbar-nav mr-auto">
                    <li className="nav-item active">
                      <Link className="nav-link" to="/Home">Home</Link>
                    </li>
                    <li className="nav-item">
                      <Link className="nav-link" to="/consultation">Consultation</Link>
                    </li>
                    <li className="nav-item">
                      <Link className="nav-link" to="/register">Register</Link>
                    </li>
                    <li className="nav-item">
                      <Link className="nav-link" to="/Login">Login</Link>
                    </li>
                  </ul>
                </div>
            </nav>

            <Route exact path="/Home" component={Home} /> 
            <Route exact path="/consultation" component={Consultation} />
            <Route path="/register" component={Register} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/consultation/2" component={Consulation2} />
            <Route exact path="/consultation/3" component={Consulation3} />
            <Route exact path="/consultation/4" component={Consulation4} />
         </Router>
        );
      }
  }

  function Home() {
    return (
      <div>
        <h2>Home</h2>
      </div>
    );
  }

  function Register() {
    return (
      <div>
        <h2>Register</h2>
      </div>
    );
  }

当我单击按钮以在移动设备中显示我的导航栏时，没有显示任何内容。 我对模态有同样的问题。

我是否错过了安装步骤？ 当我自己的组件不适用于主题时，我是否需要编写它们？

Answer 1

bootswatch 没有特定或单独的 JS 文件，所以我们只需要担心将 bootswatch 主题添加到我们的项目中；对于 JS 部分，我们使用reactstrap

相关JS：

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import { Button } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootswatch/dist/lux/bootstrap.css';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'World to React'
    };
  }

  render() {
    var testName = 'modal for testing - click here';
    return (
      <div>

        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
        </p>
        <ModalExample buttonLabel={testName} />
      </div>
    );
  }
}

class ModalExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState(prevState => ({
      modal: !prevState.modal
    }));
  }

  render() {
    return (
      <div>
        <Button  onClick={this.toggle}>{this.props.buttonLabel}</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

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

完成工作stackblitz here

Answer 2

安装引导表

• npm install bootswatch

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { Navbar } from "./components/Navbar";
import { Home } from "./components/Home";
import "bootswatch/dist/litera/bootstrap.min.css"

function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route exact path="/" component={Home} />
      </Switch>
    </Router>
  );
}

export default App;