详解React中书写css最佳方法(styled-components)

在react中怎样更好的书写我们的css样式一直是一个很头疼的事件，官方也没个明确的态度

通过比较内联样式，普通导入css，css module, css in js等，最后还是觉得css in js这种方法更好，开发更加方便

下面就来演示一下这个styled-components这个库

首先肯定就是安装了

yarn add styled-components

按照开发习惯肯定是内容文件和样式文件分开，所以创建一个component.js(放内容)和一个style.js(放样式)文件

例如先演示下怎么用这个库：

案例一
在component.js中

class Counter extends PureComponent{
  constructor(props){
    super(props);
  }
  render(){
    return (
      

        

          金刀刘1
          金刀刘2
          金刀刘3
        
      
    )
  }
}

我们通常会把这个render里面的div换一下

在style.js中

import styled from 'styled-components'

export const HomeWrapper =  styled.div`
  font-size:50px;
  .banner{
    color:green;
     span{
       color:red;
        &.active{
          color:#000;
        }
     }
  }

`

然后在component.js中导入并且使用

import {
  HomeWrapper,
}
from './style'

 render() {
    return (
      
        

          金刀刘1
          金刀刘2
          金刀刘3
        
      
    )
  }

效果如下：

案例二:
在input里面使用一下attrs这个属性

在style.js中

export const HYinput = styled.input.attrs({
  placeholder:'lsh',
  bColor:"red"
})`
  border-color:${props=>props.bColor};
`
这个props箭头函数会被执行，然后会将attrs中的所有属性传到props里面来

在component.js中

import {
  HYinput
}
from './style'

 render() {
    return (
      
        
      
    )
  }

效果如下

案例三:
我们在state中定义的变量，将它放入样式中使用

还是上面那个input框，我们在state中定义一个宽度

this.state={
      width:"500px"
    }

在style.js里面加上一个width

export const HYinput = styled.input.attrs({
  placeholder:'lsh',
  bColor:"red"
})`
  border-color:${props=>props.bColor};
  width:${props=>props.width};
`

案例四:
样式的继承，相同的样式可以不用书写

我们定义两个button样式，其中HYPrimartButton是继承HYbutton里面的样式，如下

export const HYbutton = styled.button`
  padding:10px 20px;
  color:${props=>props.theme.themeColor};
`
export const HYPrimartButton = styled(HYbutton)`
   /* padding:10px 20px; */
   background-color:green;
`

在component.js中

import {
  HYbutton,
  HYPrimartButton
}
from './style'

 我是普通按钮
  我是主要的按钮

效果如下:

案例五:
类似于全局样式

我们在component.js中

import {ThemeProvider} from 'styled-components'
导入这个ThemeProvider

还是那两个button，相当于给它们传了一个themeColor样式，它们俩都具有了

我是普通按钮
 我是主要的按钮
 

在style.js中

export const HYbutton = styled.button`
  padding:10px 20px;
  color:${props=>props.theme.themeColor};
`
export const HYPrimartButton = styled(HYbutton)`
   /* padding:10px 20px; */
   background-color:green;
`

效果如下

总之，这种样式书写的话，在react我觉得是最方便的了