摘要：廢話(huà)不多話(huà)，來(lái)上車(chē)安裝或者簡(jiǎn)述使用創(chuàng)建全局的樣式首先創(chuàng)建一個(gè)文件，例如引全局包里面為項(xiàng)目需要的內(nèi)容在組件內(nèi)把引入的當(dāng)做標(biāo)簽寫(xiě)入創(chuàng)建一個(gè)局部的樣式引局部包里面為項(xiàng)目需要的內(nèi)容在組件內(nèi)把引入的當(dāng)做標(biāo)簽寫(xiě)入類(lèi)嵌套類(lèi)似于用法大同小異列舉

廢話(huà)不多話(huà)，來(lái)上車(chē)！

安裝：

  npm install --save styled-components   （或者 yarn add styled-components）

簡(jiǎn)述使用:

1、 創(chuàng)建全局的樣式：

首先創(chuàng)建一個(gè)JS文件，例如style.js
①：import { createGlobalStyle } from "styled-components" // 引全局包
②：export const GlobalStyle = createGlobalStylemargin:0// ``里面為項(xiàng)目需要的css內(nèi)容
③：在react組件內(nèi) 把引入的 GlobalStyle 當(dāng)做標(biāo)簽寫(xiě)入

     class App extends Component {
        render() {
            return (  );
        }
      }
    

創(chuàng)建一個(gè)局部的樣式

①：import styled from "styled-components"; // 引局部包
②：export const HeaderWrapper = styled.div //里面為項(xiàng)目需要的css內(nèi)容
③：在react組件內(nèi) 把引入的 HeaderWrapper 當(dāng)做標(biāo)簽寫(xiě)入

   
      class App extends Component {
        render() {
            return (  );
        }
      }
   

3、類(lèi)嵌套：（類(lèi)似于less sass用法大同小異）

列舉個(gè)項(xiàng)目實(shí)例：

  export const SearchWrapper = styled.div`
    position:relative;
    float:left;
    .iconfont{
        position:absolute;
    }`;

4、增加屬性寫(xiě)法：

     舉例給A標(biāo)簽增加attrs屬性:
     
     export const Logo = styled.a.attrs({
          href:"/"
     })`   

5、 設(shè)置當(dāng)前元素內(nèi)指定的class類(lèi)

        &.left{
            float:left;
        }
        &::placeholder{
            color:#999;
        }

6、 styled-components 傳值寫(xiě)法：

        樣式內(nèi)js文件用props去接收
        
        export const RecommendItem = styled.div`
            background: url(${(props) => props.imgUrl});
        `;
        
        react組件內(nèi)給樣式JS文件傳入需要的地址
        
        

7、常見(jiàn)小坑：

 
    引圖片不要直接寫(xiě)行內(nèi)樣式，默認(rèn)會(huì)轉(zhuǎn)化為字符串，導(dǎo)致加載圖片失敗，可用如下方式：
    
    import logoPic from "../../statics/logo.png";
    export const Logo = styled.a`
        background:url(${logoPic});
    `;

整理不易，喜歡的話(huà)就順手點(diǎn)個(gè)贊吧，您的贊會(huì)是我們繼續(xù)分享的動(dòng)力 ！