react 之 styled-components

css样式并不像JavaScript语法有作用域，因此css样式作用于全局很容易造成全局污染，为了防止这类问题发生，我们可以遵循CSS的BEM规范，即：blockName-elementName–modifierName（模块名 + 元素名 + 修饰器名），也可以使用webpack中CSS-module消除全局污染的问题，只对引用的目录下的样式文件进行编译。还可以使用css样式私有化，如vue中style标签的scoped属性，react中可以使用styled-components插件来实现

styled-components官网地址

https://www.styled-components.com/

安装

npm i styled-components -S

引入

import styled from 'styled-components'

使用

标签的嵌套及选择器基本同less和scss类似

// styled.js
export const Header = styled.div`
  width:100%;
  height:1rem;
  background: #f40    
  text-align: center; 
  position: relative;
  
  a {
  	color: white
  }
`
// App.jsx 
import {
   Header} from "./styled";
class App extends Component{
   　　
	render(){
   　　　　
			return <Header><a>头部</a></Header>
		}
	}

传参

有时候可能会根据交互动态的改变