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

Question

我正在尝试为我的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';

Answer 1

问题出在你的CSS中，删除颜色值中的引号

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

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

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