Slider: How to import slider styles if i m using postCSS ?

[vk92kokil]

I imported slider styles in my css file and in my component i tried writing slider like this.

import Slider from 'rc-slider';
import styles from './style.css';
import classNames from 'classnames/bind';
const cx = classNames.bind(styles);

<---- In render function ---->
`<Slider className={cx('rc-slider')} range defaultValue={[20, 50]} min={0} max={100}
                            onChange={()=>{}} />`.

but i only see some styling getting applied to slider. What is the correct way to style Slider ?

[just-boris]

Hello! I guess your question basically not about PostCSS, but about usage with CSS-modules.

So, we always need to have control on className generation logic, which is not possible with CSS-modules. If you have CSS-modules in your project, then you need to add an exception for rc-slider styles. I am assuming that you are using Webpack and have the following loader configuration:

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

Now you need to exlude rc-slider styles from modules loader and setup modules-free setting

{ test: /\.css/, exclude: /node_modules\/rc-slider/, loader: 'style!css?modules'},
{ test: /\.css/, include: /node_modules\/rc-slider/, loader: 'style!css'}

Then you can import styles and use it as it was described in examples

import Slider from 'rc-slider';
import styles from 'rc-slider/assets/index.css';

<Slider value={50} /> <!-- no need to setup classes here-->

[lgrayland]

+1 would be great if this could be included in the readMe