我知道在react-bootstrap中更改颜色非常困难,但我想让我的按钮具有不是主要颜色的颜色。我该如何在JS/SCSS中实现此目的?
我知道在react-bootstrap中更改颜色非常困难,但我想让我的按钮具有不是主要颜色的颜色。我该如何在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/
对于按钮,您可以在Button组件中添加variant='custom'属性,并在css文件中像这样自定义您的按钮:
.btn-custom {
...
}
在紧急情况下,我能够使用内联样式为 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;
.btn-primary {
color: #fff;
background-color: #2E4C80;
background-color: cutom-color;
border-color: #2E4C80;
border-color: cutom-cor;
}
它将自动覆盖默认设置
使用 !important
进行覆盖:
App.css
.button {
background-color: #370344 !important;
}
组件
<Button className="button">Submit</Button>
对于那些想要在react-bootstrap中更改活动/点击按钮颜色的人,您必须覆盖按钮的默认scss调用。因此,例如,如果您想要在活动/点击时更改所有主要按钮的颜色,它将看起来像这样:
index.css
.btn-primary:active {
--bs-btn-active-bg:#ff79c6;
--bs-btn-active-border-color: #ff79c6;
--bs-btn-active-color: #44475a;
}
我终于弄明白了——如果你使用SCSS,这里有一个修改按钮和(我假设它是一个链接)文本的解决方案。正如其他人在上面提到的,每行样式都必须包含'!important'
规则非常重要。虽然我在网上找到的几乎所有示例都将自定义按钮类命名为'custom-btn'
,但实际上你可以随便命名。
下面的示例创建了一个带有自定义黄色背景颜色、自定义边距和边框规格以及白色字体颜色的Bootstrap按钮,其中包含了按钮内部的链接。
<Button className="any-class-name-you-want">
<a href="your-link">your-text</a>
</Button
.any-class-name-you-want {
background-color: #fcb426 !important;
margin: 10px 50px !important;
border: 1px solid #fff !important;
a {
color: white !important;
}
}
你可以使用React的条件属性进行操作
<button
className={
selectedOffer?._id == offer._id
? "btn btn-danger rounded-0 mx-1"
: "btn btn-outline-danger rounded-0 mx-1 bg-white"
}
style={
selectedOffer?._id == offer._id
? { backgroundColor: "#FA0105" }
: { borderColor: "#FA0105" }
}
onClick={() => setSelectedOffer(offer)}
>
{offer.slug}
</button>