react开发简书项目

• react有一个特点就是，在一个js文件中直接引入css，这个样式不仅在这一个文件中有效，是全局都生效的，不论哪个js文件都可以直接引用。这是我们最忌讳的问题。针对这个问题，我们可以引入 styled-components对样式进行管理。
  如何使用呢？

1. 将style.css文件改为style.js
2. 可以使用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