CSS Modules

I had these lines at the top of my file:

import Select from 'react-select';
import 'react-select/dist/react-select.css';

but the select was showing up un-styled. I made a subtle change in my webpack config file by changing this line:

{test: /\.css$/, loader: 'style!css?modules!postcss'}

to this:

{test: /\.css$/, loader: 'style!css!postcss'}

and now it works.

Does that mean I cannot use css modules with React-Select?

[bensussman]

Does this all still apply with react-select v2 and above?

Specifically what is painfully missing from the react-select docs is an example that uses custom styles with CSS Modules. The docs claim that CSS Modules are supported: https://react-select.com/styles#using-classnames but that does not seem to be the case, because a prefix is simply not good enough for CSS Modules: the class names are compiled into something different for use at run time. I am able to get around this by using the :global keyword in my stylesheet, but this is circumventing CSS Modules, not using them! Is this the approved way to set custom styles?

Please update the docs to provide an example using CSS Modules and react-select. Thanks.

[Neddz]

Hello guys,

I solved this problem by importing the react-select css like this in my js: import '!style-loader!css-loader!react-select/dist/react-select.css';

You need to add the -loader part if you are using webpack@2.4.1 or above.

I found this solution here.