如何在我的按钮上拥有一个类变量以及 Bootstrap 类？答案

【问题标题】：How can I have a class variable along with Bootstrap classes on my button?如何在我的按钮上拥有一个类变量以及 Bootstrap 类？
【发布时间】：2019-11-19 18:25:45
【问题描述】：

我有一个基于三元的变量（它们是我为颜色定义的 CSS 类）：

let color_switch_size = this.state.white ? "white-btn" : "green-btn";

我有一个按钮：

<button className={`${color_switch_size} text-capitalize font-weight-bold mt-3 mb-0 btn btn-light`} onClick={this.sizeClicked}>{small}</button>

一个。当单击不带 Bootstrap 类且仅在 className 中填充的 color_switch_size 的按钮时，该按钮可以毫无问题地切换颜色。

B。但是，当我尝试将 color_switch_size 与 Bootstrap 类一起填充到 className 中时，切换不再起作用。

我是如何让我的切换功能与 Bootstrap 类一起工作的？我做错了什么？

我试过了：

let color_switch_size = this.state.white ? "white-btn text-capitalize font-weight-bold mt-3 mb-0 btn btn-light" : "green-btn text-capitalize font-weight-bold mt-3 mb-0 btn btn-light";

但它给了我与 B

相同的结果

【问题讨论】：

如果没有颜色切换，引导程序是否工作？
@bowl_of_rice 是的
更新 color_switch_size 以包含引导程序后按钮设置是什么样的？
@bowl_of_rice 这是我的代码的粘贴箱，它可能会回答您的大部分问题。我只是很难过:(pastebin.com/vvUWUhh6
我还能做些什么来帮助您找到问题的答案@testman？

标签： javascript html reactjs debugging jsx

【解决方案1】：

没有任何 CSS 提供它有点难以说 100%，但我假设 white-btn 和 green-btn 设置 background: #somecolor。在您提供的类列表中，您还添加了btn-light 的引导类，它还为您的按钮设置背景颜色并可能覆盖您的背景颜色。

以太：

从班级列表中删除 btn-light
将您的 CSS 更改为 white-btn 和 green-btn，使它们具有 higher specificity 而不是 btn-light
重新排列您的班级列表，使 btn-light 在 color_switch_size 之前 （这可能会或可能不会工作，具体取决于您的 CSS 特异性）

<button className={`btn-light ${color_switch_size} text-capitalize font-weight-bold mt-3 mb-0 btn`} onClick={this.sizeClicked}>{small}</button>

【讨论】：