React-Bootstrap 下拉菜单组件上的自定义样式

IT技术 javascript css reactjs jsx react-bootstrap
2021-05-26 18:02:58

我正在尝试将自定义 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) 我无法更改它的大部分值。

在此处输入图片说明

3个回答

添加自定义 className<MenuItem></MenuItem>并在自定义时通过a在 .css 文件中的 className 末尾附加 a来编辑它。

在您的 .js 文件中：

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

在您的 .css 文件中：（注意a选择器中的 ）

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

PS：您可能需要添加!important.css

谢谢大家，我找到了方法！我能够通过在 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;
}

您按以下方式使用 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;
}
其它你可能感兴趣的问题
上一篇ES6 包含但不区分大小写 下一篇如何使用分派（react-redux）到类组件中