Question

我正在使用this boilerplate来创建基于反应的应用程序。我有这个基本代码：

App.js：

 render() {
    const styles = require('./App.scss');
    return (
      <div className="styles.app">
        <Helmet {...config.app.head}/>
        <Navbar fixedTop className={styles.navbar}>
          <Navbar.Header>
            <Navbar.Brand>
              <IndexLink to="/" activeStyle={{color: '#33e0ff'}}>
                <div className={styles.brand}/>
              </IndexLink>
            </Navbar.Brand>
            <Navbar.Toggle/>
          </Navbar.Header>
        </Navbar>
      </div>
    );
  }

App.scss：

.app {
  .navbar{
    background: #1b6d85;
  }
  .brand {
    position: absolute;
    $size: 40px;
    top: 5px;
    left: 5px;
    display: inline-block;
    background: #2d2d2d;
    width: $size;
    height: $size;
    background-size: 80%;
    margin: 0 10px 0 0;
    border-radius: $size / 2;
  }
  nav :global(.fa) {
    font-size: 2em;
    line-height: 20px;
  }
}
.appContent {
  margin: 50px 0; // for fixed navbar
}

对于Navbar标记，我尝试使用className和模板中的bsStyle以及CREATE FUNCTION Student_Section_Count(StudentID INT) Returns INT Begin DECLARE section_Registred INT; SET section_Registred= (Select COUNT(DISTINCT Section.ID) as 'Students Registration Count' FROM Section Inner Join Registration on registration.StudentID=Section.ID Where registration.StudentID=StudentID); Return Section_Registred; END$$ Delimiter;，正如我在网上的一些问题中看到的那样。我还没能成功编辑react-bootstrap的任何组件。如果我在react-bootstrap网站上遗漏了这个文档，请指出我。感谢。

Answer 1

React-bootstrap需要bootstrap.css作为您文件中的依赖项。将其添加到index.html中，它应该可以正常使用。

请参阅此文档：

React-bootstrap guide

如何在react-bootstrap中编辑样式？

1 个答案: