# 組件樣式分離 其實我們最希望的樣式寫法就是寫在樣式表文件中，這樣便于管理，如何去做這件事情呢？我們還記得之前想要樣式生效，只用`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模塊化**