I've been working with integrating ReactSelect with our own theming library and I've come across a few issues.
- Conflicts in theme namespacing - If you use Emotion components to override ReactSelect components you can get conflicts in the theme object that we override. For example, in my global
ThemeProvider I have a colors key with a different format that means that I end up having a weird hybrid of the colors object passed down and this causes issues. It would be better for react select to pass down theme={{ 'react-select': theme }} instead of theme={theme} as this allows prevents collisions.
- The named colors are too generic;
primary primary75 primary50 and primary25 - I can't control what colors are used in what situations so it would make more sense to use named values like menuBorder activeBackground activeText etc so we know what we are theming and what it affects.
I know this is a pretty opinionated and technically I can work around this by replacing all Components with custom ones but this feels like it defeats the purpose of a "theme" option.
To me, it makes more sense to name the theme colors as for what they are actually used for rather than having to figure out that primary25 is used only for when an element is "focused".
Another issue is that due to us using neutral0 for both the selected text color and the control background I can't theme these individually, not to mention there is no text color available for when a value is focussed so using darker colors there won't work - for example when implementing a Dark Theme.
I've been working with integrating ReactSelect with our own theming library and I've come across a few issues.
ThemeProviderI have acolorskey with a different format that means that I end up having a weird hybrid of the colors object passed down and this causes issues. It would be better for react select to pass downtheme={{ 'react-select': theme }}instead oftheme={theme}as this allows prevents collisions.primaryprimary75primary50andprimary25- I can't control what colors are used in what situations so it would make more sense to use named values likemenuBorderactiveBackgroundactiveTextetc so we know what we are theming and what it affects.I know this is a pretty opinionated and technically I can work around this by replacing all Components with custom ones but this feels like it defeats the purpose of a "theme" option.
To me, it makes more sense to name the theme colors as for what they are actually used for rather than having to figure out that
primary25is used only for when an element is "focused".Another issue is that due to us using
neutral0for both the selected text color and the control background I can't theme these individually, not to mention there is no text color available for when a value is focussed so using darker colors there won't work - for example when implementing a Dark Theme.