Question

我有一个react组件，带有两个按钮：

import React from 'react'
import './BuildControl.css'
import { Button } from 'react-bootstrap';


const buildControl = (props) => (
    <div className="BuildControl">
           <div className="Label"> {props.label}</div>
            <Button bsStyle="warning" >Less</Button>
            <Button bsStyle="custom">More</Button>
    </div>
);

export default buildControl;

对于一个类，我使用了警告按钮，而对于另一类，则使用了自定义按钮。

然后我为自定义按钮添加了一些样式

.btn-custom {
background-color: #99703F;
color: white;
}

.btn-custom:hover {
    background-color:  rgba(100, 63, 15, 0.637);
    color: white;
}
.btn-custom:active{
    background-color:  rgba(61, 37, 6, 0.637);
    color: white;
    border: 1.5px solid rgb(228, 206, 204);
}

这很好用，但是现在我的问题是我也想用bsStyle="warning"向按钮添加边框，我该怎么做？

我知道我可以在我的组件内部制作一个样式组件并添加它，但是我不认为这是最佳做法，因为我已经在另一个按钮上从外部文件导入CSS了？我如何才能最好地解决这个问题

Answer 1

再创建一个className并将其添加到您当前的className旁边，

.cstm-border {
  border: red !important;
}

//dont forgot to add important to that

，然后将其添加到ur className旁边，

<Button bsStyle="warning cstm-border" >Less</Button>

Answer 2

如果您是通过“ create-react-app”创建应用的，则可以找到“ public”目录。

进入公共目录具有index.html

您可以在“ index.html”上添加引导链接

将自定义样式添加到bootstrap clase中。

2 个答案: