使用styled-component
例如: 创建全局样式组件style.js
-
先在styled-component中解构一个createGlobalStyle出来
然后直接使用模板字符串在createGlobalStyle后面书写css样式
并传值给一个常量 然后抛出
-
然后在入口文件index.js中引入style.js文件并解构出抛出的GlobalStyle
然后在下方render内直接引入这个GlobalStyle标签
引入局部
- 创建一个home.js作为局部样式组件,
同样的,先在上方引入styled-component 并解构出styled(这里局部样式组件使用的是styled,全局使用的是createGlobalStyle)
然后用styled.header 后边直接写css样式
并传值给一个常量 然后抛出
2. 同样的方式引入根组件中
然后用样式组件的标签包裹要修改样式的子组件
这样里边的标签就可以使用这个样式组件了
3. 这里要注意 如果有多个子组件 用同一个样式组件 可以给不同的子组件外层的相同的样式组件添加className属性
4. 然后在样式组件中写的时候可以使用**&.属性名**来区分不同的组件样式 (可以设为活数据,通过父组件标签传值给子组件[通过props方式] , 接收时 是按在模板字符串中的接收方式)