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

Posted 2023-02-22

【中文标题】React-Bootstrap 的下拉菜单组件上的自定义样式

【英文标题】：Custom Style on React-Bootstrap's Dropdown Menu component

【发布时间】：2017-03-09 13:37:33

【问题描述】：

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

【问题讨论】：

在您的index.js 中定义样式表并更改您在className 部分中定义的类。你能验证什么不起作用吗？

正如我在下面的评论中提到的，问题是我想对下拉菜单（或框）进行更改，但是如果您看到代码，我只有按钮的标签，并且菜单项（与实际菜单不同），因此我没有要定义实际菜单的标签。

【参考方案1】：

谢谢大家，我找到了办法！我可以通过在 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;

【讨论】：

你为什么不直接用className="ddown ddown-custom"添加一个额外的类？

谢谢丹迪。因为我试图访问的标签是由引导程序“写入”的，但在我的代码中，我无法访问命名我需要的实际标签，即下拉菜单（不是您在上面的代码中看到的下拉按钮）。

【参考方案2】：

将自定义 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

【参考方案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;