react引入第三方插件后如何更改插件的样式

Question

组件中引入第三方轮播图插件

import { Carousel } from 'react-responsive-carousel';

<Carousel emulateTouch onChange= {this.onChange}>
            <div styleName="carouselItem">
              <div styleName="content">
                <img src={card1Src} />
                <article>
                  <h3>联名白金卡</h3>
                </article>
              </div>
              <div styleName="applyBtn" onClick={ this.applyCard }>立即申请</div>
            </div>
</Carousel>

因为我使用了styleNames来编译css类名，所以直接在对应的css文件中是找不到对应插件的类名的。
应用的插件Carousel不能够自己改变其样式，我现在的解决办法就是在jade里面另外引入一个css文件，同时保证权重高于插件的样式，覆盖插件自身的样式

以下是jade文件

link(rel="stylesheet", type="text/css", href="#{STATIC_URL}vendor/css/jadeCommon.css", media="screen")

请问还有没有更好的办法能够更改插件的样式

Answer 1

可以创建两个目录，一个styles， 一个staticStyles，这两个目录里的文件分别是需要编译的样式文件和直接引入的样式文件，然后分别对它们设置loader就好了。