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 (
          
            
            
            

          
        );
      }
    }

如果是非全局的样式

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

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

2. 在项目中引入并以标签的形式使用

 import { HeaderWrapper} from './style';
  
    
    

      首页
      下载APP
      登录
  
  

参考文章https://blog.csdn.net/qq_32063079/article/details/83277054