反応ブートストラップでは色の変更が非常に難しいことはわかっていますが、原色ではない色のボタンを使用したいと思います。 JS/SCSSでこれを行うにはどうすればよいですか?
const App = () => (
<div className="content">
<ReactBootstrap.Button bsStyle="primary">Default Button</ReactBootstrap.Button>
<ReactBootstrap.Button bsClass="custom-btn">Custom Button</ReactBootstrap.Button>
</div>
);
ReactDOM.render(
<App />,
document.getElementById("react")
);
.content {
padding: 10px;
}
.custom-btn {
background: #fff;
color: red;
border: 2px solid red;
border-radius: 3px;
padding: 5px 10px;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>
<div id="react"></div>
特定のスタイルをreact-bootstrap
<Button />
コンポーネントに追加するには、bsClass
プロパティを使用するだけです
この「テーマとカスタマイズスタイル」チュートリアルを使用できます https://react-bootstrap.github.io/getting-started/theming / react-bootstrapから、同じ問題があり、それは役に立ちました
CSSファイルにCSSを追加するか、pcssを使用している場合
次のCSS
.btn-primary {
color: #fff;
background-color: #2E4C80;
background-color: cutom-color;
border-color: #2E4C80;
border-color: cutom-cor;
}
デフォルトを自動的に上書きします
ピンチでは、インラインスタイルを使用して、ReactStrapのボタンの簡単なスタイルを設定できました。
import React from 'react';
import { Button } from 'reactstrap';
const PageButtons = (props) => {
return (
<div>
{!props.data.previous ? null : <Button style={{color:"#00005c", margin: "5%", boxShadow: "5px 5px 3px rgba(46, 46, 46, 0.62)"}} outline onClick={props.handlePrevious}>Previous</Button>}
{!props.data.next ? null : <Button style={{ color:"#00005c", margin: "5%", boxShadow: "5px 5px 3px rgba(46, 46, 46, 0.62)"}} outline onClick={props.handleNext}>Next</Button>}
</div>
);
}
export default PageButtons;