React-select: theme support

[piecyk]

For better override styles (when you need to have 3 components whit different look) created something like props.theme, ref to gist

https://gist.github.com/piecyk/14cfd932aabd1989ff10

and usage

var theme = {
  SelectControl: 'my-Select-control',
  SelectPlaceholder: 'my-Select-placeholder'
};

var selectProps = {
  asyncOptions: loadOptions,
  onChange: this.onChange,
  theme: theme,
  name: "react-select-test"
};
return (<Select {...selectProps} />);

i want to created a pull request with this, but maybe is there a better solution... any thoughts?

[dcousens]

@jossmac you might have a better handle on this could be done.

[piecyk]

:+1:

[cedricdelpoux]

I'm interested by the theme support. Is a PR in progress about this ?

[jossmac]

@JedWatson might be time to convert to Radium, thoughts?

[piecyk]

@jossmac any news about this ?

[jossmac]

@piecyk depending on the result of some research for a commercial project, it's likely that we'll re-implement using styled-components

[PeteJodo]

@jossmac if you re-implement using styled-components, will the reimplementation include a theme prop that would be able include some custom classes?

Specifically, I'd like to be able to do something like...

// my-select-one.scss

$select-input-height: 50px;
$select-input-border-radius: 0;
$select-item-font-size: 16px;
$select-padding-vertical: 17px;
$select-padding-horizontal: 18px;

@import "../node_modules/react-select/scss/default";


// my-select-two.scss

$select-input-height: 25px;
$select-input-border-radius: 2;
// ...

@import "../node_modules/react-select/scss/default";

And then, using css-modules, I can easily get 2 differently designed selects by passing the outputted object as the theme prop

[jossmac]

@PeteJodo I'd like to provide more granular control of the component styles. Though the best pattern I've discovered so far uses Glamor by itself.

Theme
Basically just a massive list of variables that you can override, things like inputPaddingHorizontal etc.

CSS
For when we haven't declared a theme variable for a property you'd like to change, an example might be that we have a background-color indicating disabled state but the consumer would like to dim the opacity.

Renderers
Let's say your design requires a different clear icon, or you find that tweaking theme and css aren't quite enough, you can provide your own component to replace ours completely.

I'll keep exploring different options.

[PeteJodo]

cool. I haven't heard of Glamor before. I actually completely forgot about the optional renderers. I should be able to just create my own with my own styles to get my desired result then

[JedWatson]

v2 has a complete styling API now 👍