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'}}/>

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

更新：实际上，将引导CSS导入我的CSS文件中即可：

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

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

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

Answer 1

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

unsigned char

请参阅https://codesandbox.io/s/p9zq6mky4q

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

1 个答案: