react-datepicker styling not getting apply.

[Bhushankumar-pawar]

I used react-datepicker, datePicker is successfully rendered but without styling

` // webpack.config.js

{
      test: /\.css$/,
      use: [{ 
        loader: "style-loader"
      },{
        loader: miniCssExtractPlugin.loader,
        options: {
          sourceMap: true,
          publicPath: "../"
        }
      }, {
        loader: "css-loader",
        options: {
          importLoaders: 1,
          modules: true,
          localIdentName: '[path]___[name]__[local]___[hash:base64:5]',
          context
        }
      }, {
        loader: "postcss-loader"
      }],
    }

[gajus]

Issue does not provide sufficient context to determine the cause of the issue.

[Bhushankumar-pawar]

This issues happens wile migrating from react-css-modules to babel-plugin-react-css module. Date picker is working fine with react-css-modules but with babel-plugin-react-css module styling of date picker not getting applied.

Please check attach screenshot with react-css-module and screen shot mention in ticket.

[AlbertLucianto]

@Bhushankumar-pawar I think the problem is imported css files from external packages are inadvertently converted into css-modules. Try using different loader configs for imported css from node_modules. Maybe below config can solve your problem.

Webpack config (Rule.oneOf):

{
  test: /\.css$/,
  oneOf: [
    {
      resourceQuery: /node_modules/,
      use: [/* your configs, but remove the options on "css-loader" */]
    },
    {
      use: [/* your configs */]
    }
  ]
}

And in your babel config for this plugin, add exclude: 'node_modules' (options.exclude) option.

This should fix not only react-datepicker, but also for other libraries that require import css stylings.