- react有一个特点就是，在一个js文件中直接引入css，这个样式不仅在这一个文件中有效，是全局都生效的，不论哪个js文件都可以直接引用。这是我们最忌讳的问题。针对这个问题，我们可以引入
styled-components对样式进行管理。
如何使用呢？
- 将
style.css文件改为style.js - 可以使用
injectGlobal注入全局样式
3ddb255daa9a3cadff10815d9fa2703.png
style.js内：
import styled from 'styled-components'
export const HeaderWraper = styled.div`
width: 100px;
color: #f00;
&.pics {
width: 100%;
height: 100%;
}
`
组件内：
import {HeaderWraper } from './style.js'
render () {
return (
<HeaderWraper className="pics"></HeaderWraper >
)
}
aa6200df01e9defd50729cb975b3c69.png
网友评论