React-Bootstrap的下拉菜单组件

Question

我正在尝试将自定义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中访问它？

编辑：

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

Answer 1

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

在.js文件中：

<MenuItem className="dropdown-link"> DaItem </MenuItem>

在.css文件中:(注意选择器中的a）

.dropdown-link a {background: red; color: yellow;}

P.S：您可能需要在.css

中添加!important

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;
}

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;
}