React-select: [V2] Theme is not customisable

[eemeli]

The v2 branch exports three const values from src/theme.js: borderRadius, colors and spacing. The latter two are objects, which allows for the theme to be modified externally, but borderRadius is just a number, so it cannot. Could it also be wrapped in an object to make this possible?

[eemeli]

Ah, bother. As the theme isn't actually exported, the theme as a whole is not customisable from an ES6 context, as the package.json jsnext:main and module values direct packagers to use dist/react-select.es.js rather than lib/index.js.

So could the theme be exported, and made customisable? As an alternative to clobbering the base theme, could something similar to the styles props be implemented for the theme? This would make react-select v2 much easier to customise.

[JedWatson]

I think this would make sense.

I'd like to clean up the theme export, to make it easy to apply simple re-skins (e.g some colours, spacing, border radius etc.) then we could pass it down to to components in commonProps

Then a new theme prop on Select could support two modes:

• theme={themeObject} ("clobber mode")
• theme={base => ({ ...base, primaryColor: 'pink' })} (extend mode, like styles)

Open to PRs 😄

[eemeli]

I'm not sure if it makes sense to have the theme completely replaceable, rather than just overridable. The core code refers to particular theme values in multiple places, and those could very easily be left undefined by complete replacement.

[akx]

@eemeli It does make sense if you have a predefined custom theme, like

import {defaultTheme} from 'react-select';
const customTheme = {...defaultTheme, ...};
export default customTheme;

Also, I have a PR brewing for this :)

[isitrita]

@JedWatson When do you plan make release with theme? We are really waiting for this!

[Dandry]

@JedWatson I also need this desperately! Thanks!

[giocodes]

How come this works on the docs:
https://react-select.com/styles#overriding-the-theme

But not on the live code or locally?
https://codesandbox.io/s/1oz7n0wok4?module=/example.js

Are the docs on a later version than 2.0.0 ?

[Dandry]

@giocodes
The docs may be using a version from master, whereas codesandbox uses npm package, which had been created before this feature was actually merged.

[danpoq]

@Dandry See: https://github.com/JedWatson/react-select/issues/3006#issuecomment-418408988

[jkeruzec]

Can't we access latest beta version from npm to test the customable theme ?

[danpoq]

Released in 2.1.0

[renschler]

hey I'm new to react and frontend for that matter. I'm trying to set border style for the <Select/>component via a className. Adding border: 5px solid #e4e4e4; to the css class creates a new border in addition to the existing default styled border on the <Select/> component (see screenshot below). I'm not sure if I should file a separate issue or if this is the same as what is described above.

The expected behavior would be for the <Select/> component to only have one border and use the styling provided by the css class.

im using version 2.1.0 installed with npm

[akx]

@renschler You will need to customize the theme object's border value(s) to do that; the <Select> itself is not the actual visible component.

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!