React-Bootstrap的下拉菜單組件上的自定義樣式

Question

我試圖將自定義css樣式應用於react bootstrap組件，但無法弄清楚如何訪問該組件的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 a編輯。

在您的.js文件中：

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

在您的.css文件中：（請注意選擇器中的a ）

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

PS：您可能需要在.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;
}