Add 'className' customization

[o-evin]

What do you think about class names customization by passing some kind of 'theme' or 'classNames' parameter to the component with all classes definition you want to override for the component? E.g.:

// Can be imported from some external source together with css files
const bootstrap4 = {
  menu: "my-custom-menu-class",
  input: "size-xl input-default"
  token: "tag",
  tokenClose: "fa fa-close",
  ...or with some kind of nested structure
  token: {
    class: "tag",
    close: "fa fa-close"
  }
}

<Typeahead
  theme={bootstrap4}
/>

This way we can address many issued like maintain project naming guidelines, integrate different themes and bootstrap versions, sizes etc...

[ericgio]

I see two primary use cases for CSS and themes:

1. Bootstrap themes
2. More granular CSS for one-off or custom styles

For the first case, this is usually accomplished purely through stylesheet overrides and maybe a little bit of high-level scoping, but individual components are often left untouched. I have an issue open for this, since the multi-selection case currently doesn't handle themes very well.

For the second case, I agree that it's currently not really possible to assign your own classnames to subcomponents of the typeahead, like the menu or the input. I'm working to expose the subcomponents so developers have full flexibility in customizing them, including adding classnames.

Does that more or less capture the use cases you're thinking of?

[o-evin]

Yes, that covers all the use cases, and actually with the already implemented custom render and stylesheet overrides I've been able to get the required result (except codestyle guidelines for css). The only thing that this solution is looking more like a workaround when you implement custom rendering just to replace a class name. Expose the subcomponents will be definitely helpful... Thanks!

[ericgio]

As of v3.0.0 pretty much every subcomponent can either be rendered in a custom manner (vie eg: renderMenu, renderToken), or has a classname attached to it such that custom CSS can be written.