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

Question

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

主题是显示的，但它的某些使用 js 的组件不起作用。喜欢模态或下拉。

我跟着安装文档： - npm 安装 bootswatch - 将其导入 css 个文件

我也尝试安装bootstrap但是没有结果，主题没有直接使用他们的组件。

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

安装 bootswatch

npm 安装 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;

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

How install a Bootswatch theme on React project?

twitter-bootstrap

bootswatch

reactjs

bootstrap-4