为什么 react-bootstrap 不使用我的自定义样式？答案

【问题标题】：Why does react-bootstrap not use my custom style?为什么 react-bootstrap 不使用我的自定义样式？
【发布时间】：2019-06-30 17:02:00
【问题描述】：

我正在尝试为我的 API 做一个前端，并且我正在使用 ReactJS，以及 react-bootstrap。我一直讨厌 bootstrap 只为其按钮设置颜色，而在 vanilla html css 中更改按钮颜色很容易。

但是，我的 react-bootstrap/Button 实例似乎从未真正使用我分配给它的自定义 CSS。这是我试图应用到按钮的样式，存储在styles/style.css

.accent {
    background-color: '#666a86';
    border-color: '#FFF'
}

.accent:hover {
    background-color: '#95b8d1';
}

我正在将此 CSS 文件导入到我的组件中，如下所示：

import '../styles/style.css'

注意组件存储在 /components/ComponentName.jsx 中。我尝试使用className 和bsClass 将类分配给Button 组件，但两者都没有任何区别。我能够设置按钮样式的唯一方法是内联：

<Button style={{color:'#FFF'}}/>

为什么我的按钮根本没有样式？它仍然卡在默认的蓝色引导按钮上。

更新： 在我的 CSS 文件中导入引导 CSS 确实有效：

.accent {
    background-color: #666a86;
    border-color: #FFF
}

.accent:hover {
    background-color: #95b8d1;
}

@import '~bootstrap/dist/css/bootstrap.css';

【问题讨论】：

试试
我认为您可以创建自定义 css .class-for-button 并为您使用该类按钮。例如。希望它有效
@HemadriDasari 如果您阅读了我的帖子，您就会知道我不想将其设置为内联样式。我的样式远不止一行。
您需要使用浏览器检查器检查问题。您可能会明白为什么没有应用您的新样式（可能被其他样式覆盖？）
您是在导入自定义样式表之前还是之后导入引导样式表？如果您在自定义样式之后导入引导程序的样式，它们将层叠在它们之上 - 您的自定义样式将不会呈现。确保在引导样式之后导入自定义样式

标签： reactjs react-bootstrap

【解决方案1】：

问题出在你的css中，去掉颜色值中的引号

.accent {
  background-color: #666a86 ;
  border-color: #FFF ;
}

.accent:hover {
  background-color: #95b8d1;
}

见https://codesandbox.io/s/p9zq6mky4q

【讨论】：

这实际上并没有改变任何东西。您可以看到该按钮具有“accent btn btn-primary”类，但它仍然是默认样式。