Does React-Select support to mport the 'react-select' less file directly and re-value a variable, then it take effect on the webpage control without any css compiling?

[ZhangScott]

I am developing the 3rd party web control, and using the 'react-select'. Currently I would like to customize my control via overwriting the less variables, other than overwriting css directly, it makes more succinct in code. My question is that is it possible to import the 'react-select' less file directly and re-value a variable, then it take effect on the webpage control without any css compiling?

[madbonkey]

Don't know if there's an easy way to do it, but I'd recommend using the override mechanisms CSS provides. Seems to me like less work/code to achieve what you want, and is slightly more update-safe, isn't it?

[burtyish]

using the override mechanisms CSS

@nico-schneider, did you mean the override mechanism that Sass provides?
Here's my suggestion:
Since the variables in select.scss all have the !default annotation, they can be overriden by a previous definition.
So:
my-select-variable-overrides.scss file:

$select-input-bg: #BADA55;

custom-react-select.scss file:

@import "my-select-variable-overrides";
@import "/node_modules/react-select/scss/default";

[bvaughn]

Currently, both 'less' and 'scss' directories are included in the dists so you can use them however you want.

I'd recommend overriding styles using CSS though as, in my opinion, the SCSS/LESS files are source code and don't really belong in the NPM bundle. react-select provides a couple of ways to do this- you can specify your own class names or override the default (global) styles.

Closing this issue for now. I believe the question has been answered sufficiently. 😄