# 组件样式分离 其实我们最希望的样式写法就是写在样式表文件中，这样便于管理，如何去做这件事情呢？我们还记得之前想要样式生效，只用`import "样式文件地址"`即可。实现一下。 ## 新建样式表文件 `src/components/commet.css`和`src/components/item.css` 先修改commet.css文件 ~~~css .title{ color:red; text-align: center; } *{ margin: 0; padding: 0;list-style: none; border: none;} ~~~ 修改Commet.js组件文件，文件头部导入css文件以及删除行内样式。 ~~~ import './commet.css' ~~~ ~~~ render() { return ( <Fragment> <div className="title">评论组件标题</div> <ul> {this.renderList()} </ul> </Fragment> ) } ~~~ 效果如下  ## 问题 这里面我们可以发现样式表文件生效了， 不过存在问题在于，我们的样式是全局样式，我们在当前组件commet.js中导入css，对Item评论列表组件也生效了。 这样就违背了我们所说的组件样式只能对当前组件生效的问题。那么如何解决？像Vue组件化它是通过`vue-loader`和` VueLoaderPlugin`来实现的。那么它也仅仅是对Vue生效的。那么React如何解决？ 这里我们要提到一个新的词汇**CSS模块化**