React（3）组件的样式styled-components

组件的样式

博主wx: -GuanEr-，加博主进前端交流群

一、简单使用

我们可以为每个组件单独创建一个css样式文件，然后在js文件中，直接导入使用：

// header-nav.js
...
import './header-nav.css'
...

但是这种方式导入的样式会作用于全局。如果要让当前样式只生效于当前组件，可以在选择器上加以限制。比如在声明组件时为当前组件的根元素添加一个唯一的id或类名。然后在样式列表中加上这个选择器标识即可：

// header-nav.js
...
class HeaderNav