什么是styled-components

styled-components 是react的一個(gè)第三方庫(kù)，一種css私有化的方式。用來(lái)實(shí)現(xiàn)CSS in JS 的方式之一。

在多人協(xié)作中，css必定會(huì)出現(xiàn)命名沖突，與vue的scoped解決方案不同，react用styled-components的給類(lèi)名加了隨機(jī)字符的方式實(shí)現(xiàn)了css的私有化。

為什么要用styled-components

1. 性能好
2. 徹底解耦components與css文件，All in js！
3. 更好的實(shí)現(xiàn)了React的組件化思想
4. 樣式可以使用變量、繼承，使用起來(lái)更自由，更靈活

缺點(diǎn)：麻煩，增加學(xué)習(xí)成本

簡(jiǎn)單使用步驟

1. 安裝

   cnpm i styled-components -S

2. 引入

   先創(chuàng)建一個(gè) styled.js 文件，然后進(jìn)行如下引入：

   import styled from 'styled-components'
   

3. 基本使用

   在 styled.js 文件里，編寫(xiě)你的styled代碼

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

   在 .jsx 的react組件文件里，進(jìn)行引入并使用

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

   然后就有效果啦：

   效果

進(jìn)階使用

1. 樣式傳參

   styled.js 文件中，把需要傳參的樣式用 ${} 包裹，內(nèi)部為一個(gè)函數(shù)，參數(shù)為props，返回值為props身上的所需屬性：

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

   .jsx 文件中，用標(biāo)簽傳值的方式傳遞屬性

   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. 標(biāo)簽屬性的設(shè)置

   styled.js 文件中，在創(chuàng)建標(biāo)簽樣式的時(shí)候，在標(biāo)簽名后加 .attrs() 即可對(duì)標(biāo)簽屬性進(jìn)行設(shè)置，其中， .attrs() 里的傳一個(gè)函數(shù)，函數(shù)的參數(shù)props，返回值為配置項(xiàng)對(duì)象：.attrs(props=>({配置項(xiàng)})) ，然后正常書(shū)寫(xiě)樣式模板：

   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:'請(qǐng)輸入搜索內(nèi)容'
           }
       }
       render(){
           return (
              <HeaderContainer color={this.state.headerBackground}>
                   // input里必須有onChange事件
                  <SearchInput placeholderVal={this.state.placeholderVal} onChange={this.handleChange}/>
   
               </HeaderContainer>
           )
       }
       handleChange(){
           
       }
   }
   

   于是設(shè)置屬性便完成了：

   設(shè)置屬性效果

3. 繼承

   styled.js 文件中創(chuàng)建一個(gè)被繼承的按鈕，再用一個(gè)新按鈕繼承它。

   繼承語(yǔ)法：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:'請(qǐng)輸入搜索內(nèi)容'
           }
       }
       render(){
           return(
               <HeaderContainer color={this.state.headerBackground}>
                   <BtnOne>原按鈕</BtnOne>
                   <BtnTwo>繼承按鈕</BtnTwo>
               </HeaderContainer>
           )
       }
       handleChange(){
   
       }
   }
   

   效果如下，繼承者只更改了顏色，繼承了全部樣式：

   繼承效果

4. 動(dòng)畫(huà)：

   styled.js 文件中，引入動(dòng)畫(huà)api：keyframes，并給繼承者按鈕設(shè)置動(dòng)畫(huà)

   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;
   `
   
   

   動(dòng)畫(huà)效果：

   動(dòng)畫(huà)效果