React设置非全局样式关于styled-compoents组件的使用

如果引入的是css文件，只要在一个文件中被引入，则全局都会生效
import ‘./index.css’;
使用stled-components可以使得样式只对我们自己想要的组件生效而不是全局生效
如果是要全局应用的css
1.把对应的css后缀文件命名为Js后缀
2.

import { createGlobalStyle } from 'styled-components'`
    export const GlobalStyle = createGlobalStyle`
  这里写相关的css代码
    `

3.当做标签的形式在根文件下引入

import { GlobalStyle } from "./style";
    class App extends Component {
      render() {
        return (
          <Fragment>
            <GlobalStyle />
            <IconfontCss></IconfontCss>
            <Header></Header>
          </Fragment>
        );
      }
    }

如果是非全局的样式

1.新建一个js文件写css代码

import styled from 'styled-components';
export const HeaderWrapper = styled.div`
  position:relative;
  height:58px;
  border-bottom:1px solid #f0