javascript 如何在react-bootstrap中更改按钮的颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50842135/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change colors for a button in react-bootstrap?
提问by qazwsxedcrfvtgbyhn
I know that changing colors is very difficult in react-bootstrap, but I would like to have my button with a color that isn't a primary color. How can I do this in JS/SCSS?
我知道在 react-bootstrap 中改变颜色非常困难，但我想让我的按钮的颜色不是原色。我怎样才能在 JS/SCSS 中做到这一点？
回答by inaumov17
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>To add the specific styling to react-bootstrap<Button />component, simply use bsClassproperty
要将特定样式添加到react-bootstrap<Button />组件，只需使用bsClass属性
Taken from the official docs
取自官方文档
回答by Gbemi Kadri
You can use this "Theming and Customizing styles" tutorial https://react-bootstrap.github.io/getting-started/theming/from react-bootstrap, I had the same issue and it was helpful
您可以使用来自 react-bootstrap 的“主题和自定义样式”教程https://react-bootstrap.github.io/getting-started/theming/，我遇到了同样的问题，这很有帮助
回答by Rai Hafeez
Just add CSS in Css File or if you are using pcss
只需在 Css 文件中添加 CSS 或者如果您使用的是 pcss
following css
跟随CSS
.btn-primary {
color: #fff;
background-color: #2E4C80;
background-color: cutom-color;
border-color: #2E4C80;
border-color: cutom-cor;
}
it will automatically override defaults
它会自动覆盖默认值
回答by Imriven
In a pinch, I was able to use inline-style for some simple styling of buttons in ReactStrap.
在紧要关头，我能够使用内联样式在 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;
