React-Bootstrap的下拉菜单组件如何自定义样式？

Question

我正在尝试为React Bootstrap组件应用自定义CSS样式，但无法弄清如何访问在组件的JSX中未明确表示的元素。例如：

<ButtonGroup>
      <DropdownButton className="ddown" id="ddown" title="Dropdown">
      <MenuItem className="itemxx" href="#books">Books</MenuItem>
      <MenuItem className="itemxx" href="#podcasts">Podcasts</MenuItem>
      <MenuItem className="itemxx" href="#">Tech I Like</MenuItem>
      <MenuItem className="itemxx" href="#">About me</MenuItem>
      <MenuItem className="itemxx" href="#addBlog">Add a Blog</MenuItem>
      </DropdownButton>
    </ButtonGroup>

下拉框没有输出口，我希望在CSS中为其指定特定宽度并消除其圆角。有没有办法让我在CSS中访问它？

编辑：

这是我想要编辑的元素，顺便说一句，如果我尝试通过.dropdown-menu访问它，1）我会更改所有下拉列表，2）我无法更改大多数值。

- Jacobo Koenig

---

在你的 index.js 中只需定义样式表并更改你在 className 部分定义的类即可。你能验证一下哪里出了问题吗？ - Dandy

正如我在下面的评论中提到的那样，问题在于我想对下拉菜单（或框）进行更改，但是如果您查看代码，您会发现我只有按钮和菜单项的标签（与实际菜单不同），因此我没有标签来定义实际的菜单。 - Jacobo Koenig

Answer 1

在自定义时，向<MenuItem></MenuItem>添加自定义className，并通过在.css文件中将a附加到className的末尾进行编辑。

在您的.js文件中： <MenuItem className="dropdown-link"> DaItem </MenuItem> 在您的.css文件中：（注意选择器中的a） .dropdown-link a {background: red; color: yellow;} 注：您可能需要在.css中添加!important。

- rahul_sann

Answer 2

谢谢大家，我找到了一种方法！我能够通过在CSS中包含[aria-labelledby = ddown]（ddown是我的下拉菜单的自定义类）来访问特定菜单，如下所示：

.dropdown-menu[aria-labelledby = ddown] {
  background-color: lightblue;
  max-width: 80px; //This, by the way, is not working for some reason.
  border-radius: 0;
  margin: 0;
}

- Jacobo Koenig

---

你为什么不添加一个额外的类，className="ddown ddown-custom"呢？ - Dandy

谢谢Dandy。因为我正在尝试访问的标签是由Bootstrap“编写”的，但在我的代码中，我无法访问需要的实际标签名称，即下拉菜单（而不是上面代码中看到的下拉按钮）。 - Jacobo Koenig

Answer 3

您可以按照以下方式使用DropDown.Menu和DropDown.Item

<Dropdown.Menu className="my-dropdown">
  <Dropdown.Divider />
  <Dropdown.Item className="itemxx" href="#books">Books</Dropdown.Item>
  <Dropdown.Item>className="itemxx" href="#podcasts">Podcasts</Dropdown.Item>
</Dropdown.Menu>

然后添加您自定义的CSS样式

.my-dropdown {
  border-radius: 0;
}

- guy dadon