How to add class name on DropdownButton component in `react-bootstrap`

Question

I use below components from react-bootstrap :

import { DropdownButton, MenuItem } from 'react-bootstrap';

When I use DropdownButton in my component, it creates a <div> with a nested <button> . If I set className on DropdownButton like below:

<DropdownButton className='myDropdown'>

the class name myDropdown will apply to the <button> DOM, how can I set the class name for the <div> DOM?

Answer 1

import React from 'react';
import ReactDOM from 'react-dom';
import { DropdownButton, MenuItem } from 'react-bootstrap';
require('bootstrap/dist/css/bootstrap.css');

export default class MyMenu extends React.Component {

  render() {
    return (
    <DropdownButton title="Dropdownxs">
      <MenuItem href="#books">cricket</MenuItem>
      <MenuItem href="#podcasts">Podcasts</MenuItem>
      <MenuItem href="#">Football</MenuItem>
      <MenuItem href="#">Hockey</MenuItem>
      <MenuItem href="#addBlog">kabadi</MenuItem>
    </DropdownButton>
    );
  }
}


ReactDOM.render(
  React.createElement(ModuleMenu, null),
  document.getElementById('root')
);