React的styled-components

什么是styled-components

styled-components 是react的一个第三方库，一种css私有化的方式。用来实现CSS in JS 的方式之一。

在多人协作中，css必定会出现命名冲突，与vue的scoped解决方案不同，react用styled-components的给类名加了随机字符的方式实现了css的私有化。

为什么要用styled-components

1. 性能好
2. 彻底解耦components与css文件，All in js！
3. 更好的实现了React的组件化思想
4. 样式可以使用变量、继承，使用起来更自由，更灵活

缺点：麻烦，增加学习成本

简单使用步骤

1. 安装

   cnpm i styled-components -S

2. 引入

   先创建一个 styled.js 文件，然后进行如下引入：

   import styled from 'styled-components'
   

3. 基本使用

   在 styled.js 文件里，编写你的styled代码

   const HeaderContainer = styled.div`
      width:100%;
      height:2rem;
      background:red;
   `
   export { HeaderContainer }
   

   在 .jsx 的react组件文件里，进行引入并使用

   import React,{ Component } from 'react'
   import { HeaderContainer } from './xxx.js'
   class Header extends Component{
       render(){
           return (
              <HeaderContainer></HeaderContainer>
           )
       }
   }
   

   然后就有效果啦：

   效果

进阶使用

1. 样式传参

   styled.js 文件中，把需要传参的样式用 ${} 包裹，内部为一个函数，参数为props，返回值为props身上的所需属性：

   export const HeaderContainer = styled.div`
      width:100%;
      height:1rem;
       line-height:1rem;
      background:${props=>props.color};
   `
   

   .jsx 文件中，用标签传值的方式传递属性

   import React,{ Component } from 'react'
   import { HeaderContainer } from './xxx.js'
   class Header extends Component{
       constructor(){
           super();
           this.state = {
               headerBackground:'green'
           }
       }
       render(){
           return (
              <HeaderContainer color={this.state.headerBackground}>
               </HeaderContainer>
           )
       }
   }
   

   效果：成功传入颜色

   传值效果

2. 标签属性的设置

   styled.js 文件中，在创建标签样式的时候，在标签名后加 .attrs() 即可对标签属性进行设置，其中， .attrs() 里的传一个函数，函数的参数props，返回值为配置项对象：.attrs(props=>({配置项})) ，然后正常书写样式模板：

   export const SearchInput = styled.input.attrs(props=>({
       type:'text',
       value:props.value,
   }))`
       width:4rem;
       height:.5rem;
       padding-left:.2rem;
   `
   

   .jsx 文件中，直接引入并使用：

   import React,{ Component } from 'react'
   import { HeaderContainer,SearchInput } from './xxx.js'
   class Header extends Component{
       constructor(){
           super();
           this.state = {
               headerBackground:'green',
               placeholderVal:'请输入搜索内容'
           }
       }
       render(){
           return (
              <HeaderContainer color={this.state.headerBackground}>
                   // input里必须有onChange事件
                  <SearchInput placeholderVal={this.state.placeholderVal} onChange={this.handleChange}/>
   
               </HeaderContainer>
           )
       }
       handleChange(){
           
       }
   }
   

   于是设置属性便完成了：

   设置属性效果

3. 继承

   styled.js 文件中创建一个被继承的按钮，再用一个新按钮继承它。

   继承语法：styled(被继承的样式组件)

   export const BtnOne = styled.button`
      width:2rem;
       height:.8rem;
       line-height:.8rem;
       margin:0 .2rem;
       background:red;
       border:none;
       color:#fff;
   `
   
   export const BtnTwo = styled(BtnOne)`
      background:blue;
   `
   

   .jsx 文件中直接引入并使用

   import React from 'react'
   import { HeaderContainer,BtnOne,BtnTwo } from './styled'
   
   export default class Header extends React.Component{
       constructor(){
           super()
           this.state = {
               headerBackground:'green',
               placeholderVal:'请输入搜索内容'
           }
       }
       render(){
           return(
               <HeaderContainer color={this.state.headerBackground}>
                   <BtnOne>原按钮</BtnOne>
                   <BtnTwo>继承按钮</BtnTwo>
               </HeaderContainer>
           )
       }
       handleChange(){
   
       }
   }
   

   效果如下，继承者只更改了颜色，继承了全部样式：

   继承效果

4. 动画：

   styled.js 文件中，引入动画api：keyframes，并给继承者按钮设置动画

   import styled,{ keyframes } from 'styled-components'
   
   const rotate = keyframes`
       0%{
           transform:rotate(0deg)
       }
       100%{
           transform:rotate(360deg)
       }
   `
   export const BtnTwo = styled(BtnOne)`
      background:blue;
       animation:${rotate} 3s;
   `
   
   

   动画效果：

   动画效果