how to apply css class on Button element inside the DropdownButton react-bootstrap?

Question

I am using Dropdown button from react-bootstrap. I want to apply class on button element inside DropdownButton. It is applying to outer div if I pass className to DropdownButton. Instead it should get applied to button element. Below is the code I am using

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

score 0 · Answer 1 · answered Jan 31 '20 at 10:40

0

Try (bsStyle="btn-group") instead of (className="btn-group"). I hope it will work.

answered Jan 31 '20 at 10:40

Himanshu Joshi

292
2
10

score 0 · Answer 2 · answered Dec 23 '21 at 06:36

I was looking for a way to make a dropdown xs size (bootstrap 4 class btn-xs), since the options for the size prop were reduced to sm and lg.

It is possible to pass custom css classes to the DropdownButton component using the variant prop. Example on a "filter by" dropdown:

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

how to apply css class on Button element inside the DropdownButton react-bootstrap?

2 Answers2