Working with css classnames and react-virtualized or react-select

Question

So i'm trying to integrate both of this modules into my project and i have difficulties in dealing with its CSS part.

My project is using postcss to turn my own css files into "compiled" css files with added classnames to each of them. Both react-virtualized and react-select have their own css files to define the styling, however i do not understand how i can override them or integrate them into my project.

My webpack css config is the following:

[
{ loader: 'style-loader' },
{
  loader: 'css-loader',
  options: {
    localIndentName,
    sourceMap: true,
    modules: true,
    importLoaders: 1
  }
},
{
  loader: 'postcss-loader',
  options: {
    plugins: [
      postcssImport({ path: path.resolve(PATHS.app, './css') }),
      postcssCssnext({ browsers: ['> 1%', 'last 2 versions'] }),
      postcssReporter({ clearMessages: true })
    ]
  }
}]

{
  test: /\.css$/,
  use: loaders
}

When i do the following line in my main app.js file, then i get a failed parsing error of the css (Unexpected token).

import 'react-virtualized/styles.css';

The only way i was able to load the CSS styles is using

import '!style-loader!css-loader!./css/unstyled/react-virtualized.css';

Meaning, copy the whole CSS into my own project and importing it without the postcss working. However, i dont know if this is the best way because its very explicit of working with those modules.

Does anyone has a better solution?

Answer 1

You have 2 options:

1. Tell react-virtualized what generated class names your CSS is using.
2. Tell your CSS loader not to transform react-virtualized specific default class names.

For option 1 check out the react-virtualized docs. For example, look at the List component. It accepts a className property that specifies which external CSS class name to append to the outer element. Since you render your own List rows you can also attach custom class names to those elements.

For option 2, use react-virtualized's default class names (also listed in the project docs) and tell your CSS loader not to mangle them by wrapping them in a :global(...) statement (as shown in the docs).