如何为 react-bootstrap Dropdown 打开状态自定义 css？

Question

我正在使用 react-bootstrap v0.28.5 并尝试自定义 Dropdown 的背景颜色。当 Dropdown 组件打开时切换（请参见第一张图片中带有灰色背景的切换按钮）。

知道如何实现这一点吗？

我已经能够自定义下拉样式，如下面的代码所示，但似乎引导程序有自己的“开放”类（参见第二张图片中的元素树），我不知道如何使用 react className 访问。我查看了 react-bootstrap/lib/Dropdown.js 的源代码以获取一些线索，但没有运气。

反应组件

 <Dropdown className={styles.container}>
    <Dropdown.Toggle className={styles.toggle} noCaret>
      <div className={styles.title}>Title</div>
      <div className={styles.placeholder}>Selection</div>
    </Dropdown.Toggle>
    <Dropdown.Menu>
      <MenuItem eventKey="1" onSelect={(key, e) => onSelect(key, e)}>
        Action
      </MenuItem>
      <MenuItem eventKey="2">Another action</MenuItem>
      <MenuItem eventKey="3">Active Item</MenuItem>
    </Dropdown.Menu>
  </Dropdown>

styles.scss

.container {
 display: block;
 width: 100%;
 height: 100%;

 .toggle {
  border: none;
  text-align: start;
  width: 100%;
  padding: 0;

 .title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
 }

 .placeholder {
  font-size: 16px;
 }

 &:hover {
  background: #e4e5e9;
 }
}

我试过查看源代码，但看不到如何自定义“开放”类。

Pic 1: Dropdown component

Pic 2: Page elements

任何帮助将不胜感激！非常感谢。

Answer 1

您可能希望使用 !important 标记覆盖切换类的样式，如下所示：

 &:hover {
  background: #e4e5e9 !important;
 }