如何在 DropdownButton react-bootstrap 内的 Button 元素上应用 css 类？

Posted 2023-03-04

【中文标题】如何在 DropdownButton react-bootstrap 内的 Button 元素上应用 css 类？

【英文标题】：how to apply css class on Button element inside the DropdownButton react-bootstrap?

【发布时间】：2020-05-16 20:35:48

【问题描述】：

我正在使用 react-bootstrap 中的下拉按钮。我想在 DropdownButton 内的按钮元素上应用类。如果我将 className 传递给 DropdownButton，它将应用于外部 div。相反，它应该应用于按钮元素。下面是我正在使用的代码

**<DropdownButton
  className="btn-group"
  title="Assign"
  noCaret
  id="Assign"
  show=this.state.popupApplyVisible
  onToggle=() =>
    this.setState(
      popupApplyVisible: !this.state.popupApplyVisible,
    )
  
>**

【参考方案1】：

尝试 (bsStyle="btn-group") 代替 (className="btn-group")。我希望它会起作用。

【参考方案2】：

我正在寻找一种方法来制作下拉列表 xs 大小（引导 4 类 btn-xs），因为 size 道具的选项已减少到 sm 和 lg。

可以使用 variant 属性将自定义 css 类传递给 DropdownButton 组件。 “过滤依据”下拉列表的示例：

<DropdownButton
  variant="outline-dark btn-xs"
  id="filter-button"
  menuAlign="left"
  title=intl.formatMessage( id: `nav.$filterBy` )
>
  <Dropdown.Item onClick=() => handleChangeOrderBy('upcoming')>
    intl.formatMessage( id: 'nav.upcoming' )
  </Dropdown.Item>
  <Dropdown.Item onClick=() => handleChangeOrderBy('past')>
    intl.formatMessage( id: 'nav.past' )
  </Dropdown.Item>
</DropdownButton>