我正在使用this boilerplate來創建一個基於反應的應用程序。我有這樣的基本代碼:如何在react-bootstrap中編輯樣式?
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
完成正如我在網上看到的一些問題。我還沒有能夠成功地編輯react-bootstrap的任何組件。 如果我在react-bootstrap網站上錯過了這個文檔,請將它指向我。謝謝。
你有沒有在您的index.html添加bootstrap.min.css和bootstrap.min.js作爲依賴 –
不,我沒有,如果有人需要知道將風格添加到react-bootstrap中。你能否提供一些參考? –