React-select: CSS Modules

[StokeMasterJack]

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?

[felipeleusin]

If you use CSS Modules you should import the css inside your main.css/scss file inside a :global switch.

:global {
    @import "~/react-select/dist/react-select.css";
}

[alex-shamshurin]

import classNames from 'classnames/bind';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import Select from 'react-select';
import selectStyles from './react-select.css';

const cx = classNames.bind(styles);

class MySelect extends Component {
...
render() {
...
}

export default withStyles(selectStyles)(withStyles(styles)(MySelect ));

[vitbokisch]

@alex-shamshurin what is the _styles_ parameter in your case, please? Any default react-select styling? I would really appreciate if you could share with us a more detailed example.

[alex-shamshurin]

Import for 'styles' is missed there. It's just a my own styles which are used together with selectStyles

[Tenkir]

I'm not able to get this to work for some reason.

I have a stylesheet for my Dropdown component, and inside I have:

:global {
  @import 'react-select/dist/react-select.css';
}

This works fine in my DatePicker component that uses react-datepicker:

:global {
  @import 'react-datepicker/dist/react-datepicker.css';
}

I don't get any errors, but no styles are appearing.

[vitbokisch]

@Tenkir I ended up by setting up different loader rules for css modules and global styles in my webpack config file. I'm not using :global at all. I copied the css file into my project (I made a custom design so it was easier for me to do it in this way). Then I just import the css file into my js file (the same way as the example above from Alex)

[alex-shamshurin]

different configs for with css modules and without. this is for stylus, but the same is for pure css or sass

{
        test: /^((?!\.module).)*styl$/,
        use : [
          'isomorphic-style-loader',
          {
            loader : 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: 'stylus-loader',
            query : 'paths[]=node_modules&include css'
          }
        ],
      },
{
        test: /\.module.styl/,
        use : [
          'isomorphic-style-loader',
          {
            loader : 'css-loader',
            options: {
              context       : path.join(__dirname, '..', 'app'),
              importLoaders : 1,
              modules       : true,
              localIdentName: isDebug ? '[path]-[local]___[hash:base64:5]' : '[hash:base64:5]',
            }
          },
          {
            loader: 'stylus-loader',
            query : 'paths[]=node_modules&include css&resolve url'
          }
        ],
      },

[Tenkir]

It shouldn't matter what you loader config is for SCSS/Stylus/etc, since it's already compiled into CSS.

I'm using PostCSS. With PostCSS-Import. But again, I've tested this same system with other node packages and it works fine.

[vitbokisch]

{
        test: /\.style.css$/,
        use: [
          'classnames-loader',
          'isomorphic-style-loader',
          {
            loader: 'css-loader',
            options: {
              **modules: true,**
            },
          },
          {
            loader: 'postcss-loader',
            options: {},
          },
        ],
      },
      {
        test: /^((?!\.style).)*css$/,
        use: [
          'classnames-loader',
          'isomorphic-style-loader',
          {
            loader: 'css-loader',
            options: {
              **modules: false,**
            },
          },
          {
            loader: 'postcss-loader',
            options: {},
          },
        ],
      },

[vitbokisch]

the difference is you turn off modules for global css: modules: true/false

[Tenkir]

This really shouldn't be necessary though. Adding the :global flag should solve the problem (and it does with other packages). I'm just not clear why it doesn't work with this package.

[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 [email protected] or above.

I found this solution here.

[Tenkir]

@Neddz this isn't working for me. Getting an error

4:1 error Unexpected '!' in '!style!css!react-select/dist/react-select.css'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax

[bramvdpluijm]

You could also just import it from the node modules in your component file like this:
import reactSelectStyles from 'react-select/dist/react-select.css';

and then on the bottom export it together with the component styles like this:
export default cssModules(styles, reactSelectStyles)(LiveSearch);

I hope this will help!

[chenasraf]

My styles are importing properly, and I see the output CSS containing the postfixed classes for the component. However, using the component doesn't actually parse classes on the created elements - I see "plain" classes such as "Select--single" and "is-clearable". What am I missing?

I imported the module using:

import Select, { Option } from 'react-select'

and I tried all the various methods mentioned both here and in #176, including webpack config changes and :global imports, and imports in the js (in my case, ts), etc... Nothing worked.

Any ideas?

[rusyurchenko]

You can also use an include option from webpack with your style loader. My working peace of code:

{
        test: /\.css$/,
        include: [
          paths.appSrc,
          /font-awesome/,
          /react-select/,
        ],
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader');
          }
 }

[jossmac]

Looks like this is resolved.

Please comment if this is still a concern, and needs to be re-opened.

[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.

[etanb]

Agreed on better documentation for CSS Modules + react-select.

One CSS based solution I found was to add something like this to my component:

className={styles.selectContainer}

and then within the corresponding stylesheet, add CSS like so:

.selectContainer {
  [class^='selectCustom__indicators'] {
    display: none;
  }
}

Your CSS will technically still be modularly scoped under the parent element. Not ideal, but a solution.