css文件一旦在一个文件里引用了，它是全局都生效的，这样子不同组件中的样式容易发生冲突。不建议在项目中直接引入css。建议使用一个第三方模块：Styled-Components对样式进行管理。

// 直接引用样式
import './style.css';

使用第三方模块styled-components处理样式，使样式只对当前组件有效，解决不同组件间的样式冲突。

一、styled-components的安装

npm install styled-components --save

二、styled-components的使用

2.1、全局样式的

1、样式文件后缀要使用.js，而不再是.css了。然后在样式文件中用createGlobalStyle定义全局样式。

最新版的 styled-components v4 已经将原有的 injectGlobal() 方法替换成了 createGlobalStyle()。

import { createGlobalStyle } from 'styled-components'

// 建议使用Reset.css重置浏览器默认样式
export const Globalstyle = createGlobalStyle`　
body{
　margin: 0;
　padding: 0
}`

2、在项目主文件导入全局样式

import { GlobalStyle } from './style'

3、以样式组件的方式当作标签引入

return (
  <div>
    <GlobalStyle/>
    // some code……
  </div>
);

createGlobalStyle相关说明

经测试，其实直接import直接导入css样式文件也一样可以实现全局样式。(尴尬)可能这样子导入会有其实影响，不过暂时还未发现。不过还是以createGlobalStyle的方式定义，保持统一性吧。

2.2、只在组件中生效的样式

1、在样式文件（style.js）中定义styled组件并用export导出

import styled from 'styled-components';
// 图片要用import的方法引用并赋值
import logoImg from '../../static/logo.png';
const color = '#ea6f5a';

export const HeaderWrapper = styled.div`
  height: 56px;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
`;

export const HeaderCon = styled.div`
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  ul {
    float:right;
    li {
      float: left;
      margin:0 5px;
      a {
        display: block;
        line-height: 26px;
        &.btn {
          line-height: 38px;
          padding: 0 20px;
          border: 1px solid {color};
          color:{color};
        }
        &.bg {
          background:{color};
          color: #fff;
        }
      }
    }
  }
`;

// 元素的属性可以使用attrs方法传入一个对象设置属性
export const Logo = styled.a.attrs({
  href: '/test/'
})`
  width: 100px;
  height:56px;
  background-image:url({logoImg});
  background-size:contain;
  float: left;
`;

// 元素的属性可以使用attrs方法传入一个对象设置多个属性
export const HeadInput = styled.input.attrs({
  type: 'text',
  placeholder: '搜索'
})`
  float: left;
  border: 1px solid #eee;
  outlint: none;
}`

2、在组件中导入样式文件中定义好的styled组件

import React, { Component } from 'react';
import { HeaderWrapper, HeaderCon, HeadInput, Logo } from './style';

class Header extends Component {
  constructor(props){
    super(props);
    this.state = {};
  }

  render() {
    return (
      <HeaderWrapper>
        <HeaderCon>
          {/* 属性可以像下面直接设置，也可以在styled组件中设置,如果两处都设置则以使用组件时设置的属性为准 */}
          <Logo href="/"/>
          {/* 属性在styled中设置(style.js) */}
          <HeadInput/>
          <ul>
            <li><a href="/">Aa</a></li>
            <li><a href="/">登录</a></li>
            <li><a className="btn" href="/">注册</a></li>
            <li><a className="btn bg" href="/">写文章</a></li>
          </ul>
        </HeaderCon>
      </HeaderWrapper>
    )
  }
}

export default Header;

总结：
1. 使用createGlobalStyle创建全局样式，使用styled创建局部样式（只在当前组件生效，不会和其它组件中的样式产生冲突）

2. styled的语法：

// 语法
styled.element.attrs({/*属性*/})/`/*样式*/`

// 例
export const Index = styled.a.attrs({
  href: '/'
})`
  color: #ccc;
  font-size: 14px;
`;

3. styled组件的属性除了可以用styled的sttrs方法设置外，也可以用传统的方法在组件上直接设置属性。(如果两者同时设置，则以组件上设置的属性为准，如这两个例子中，链接最终会是“/home”)

<Index href="/home" target="_balck"/>

4. styled也可以使用嵌套的方式定义样式，如下

export const HeaderCon = styled.div`
  width: 100%;
  ul {
    float:right;
    li {
      float: left;
      margin:0 5px;
      a {
        display: block;
        line-height: 26px;
        &.btn {
          line-height: 38px;
          padding: 0 20px;
        }
      }
    }
  }
`;