react中样式组件 styled-components

使用styled-component

例如: 创建全局样式组件style.js

1. 先在styled-component中解构一个createGlobalStyle出来
   然后直接使用模板字符串在createGlobalStyle后面书写css样式
   并传值给一个常量 然后抛出
   

2. 然后在入口文件index.js中引入style.js文件并解构出抛出的GlobalStyle
   然后在下方render内直接引入这个GlobalStyle标签
   

引入局部

1. 创建一个home.js作为局部样式组件,
   同样的,先在上方引入styled-component 并解构出styled(这里局部样式组件使用的是styled,全局使用的是createGlobalStyle)
   然后用styled.header 后边直接写css样式
   并传值给一个常量 然后抛出

2. 同样的方式引入根组件中
然后用样式组件的标签包裹要修改样式的子组件
这样里边的标签就可以使用这个样式组件了

3. 这里要注意 如果有多个子组件 用同一个样式组件 可以给不同的子组件外层的相同的样式组件添加className属性

4. 然后在样式组件中写的时候可以使用**&.属性名**来区分不同的组件样式 (可以设为活数据,通过父组件标签传值给子组件[通过props方式] , 接收时 是按在模板字符串中的接收方式)