Unable to style Dropdown Input

[FaideWW]

Hello,

We are trying to apply styling to the label inside the Input contained in Dropdown components. Currently we are unable to access the theme of the Input, because the Dropdown does not pass its theme property onto its children.

Would it be possible to add this functionality, or to add a sub-theme property to pass theme data through the Dropdown into the Input?

[coreyar]

Check out the Customizing components section of the install doc page.

I was able to create a theme file and section the Dropdown element using the className defined by react-toolbox. Then I sub-selected any elements I wanted to modify.

Example for input

.dropdown input {
    padding: 10px!important;
    background-color:white!important;
 }

This is my first day using React-toolbox and I have little experience styling react elements. If you find another way of doing this, I'd love to hear it.

[javivelasco]

There are many ways to achieve this. In some components we are passing down the theme object given to the root to some other child components. This way, if you want to target a subcomponent you can use the same className used in the original component.

There was a bug though. The Dropdown was not passing down the Input this.props.theme. Now it is. This allows to use classNames from the Input inside the Dropdown theme. This way yo should be able to customize as you want.

[javivelasco]

Sorry, my bad. Actually passing down the theme makes classNames collisions because the Dropdown component and Input are using the same classNames for labels, errors, etc. What is exactly what you want to change? remember you can still target DOM attributes as @coreyar said.