How to override base style in component css file?

Author: AzrielLiangCreated Jul 14, 2016Updated Jul 12, 2018

The scenario is that I imported react-slick, downloaded the slick.css file and put it into the base folder, the _base.css file is like this:

javascript

 @import './slick/slick';

This is how I create a Slider component:

javascript

    <div styleName='mySliderClass'>
      <Slider >
        <ul styleName='category'>
          {this.props.businessTypes.map((e) => {
            return <BusinessLink key={e.slug}
              slug={e.slug}
              text={e.business_type}
              onClick={this.props.chooseBusiness} />
          })}
        </ul>
      </Slider>
    </div>

FYI, styleName is from react-css-module. And In the component css file I try to do something like this to override the slick.css:

css

.mySliderClass .someSlickClass {
  width: 500px; //try to override slick css
}

But this doesn't work. So how to solve this problem?

Source: dvdzkwsk/react-redux-starter-kit

View original on GitHub View discussion on GitHub