本文轉(zhuǎn)載自我的個人博客。

本文講解一些styled-components的基本使用方法，主要講由styled-components生成的樣式組件里面的html標(biāo)簽的樣式是如何寫的。找了一圈發(fā)現(xiàn)中文社區(qū)里目前還沒有我想講的這一部分的內(nèi)容，但是這部分內(nèi)容又是相當(dāng)基礎(chǔ)且重要的。所以現(xiàn)在我們就一起來學(xué)習(xí)一下吧。

本文的大部分內(nèi)容都是我從官方文檔里翻譯來的，有興趣的同學(xué)看完文章后可以移步官方文檔，我這里只起一個拋磚引玉的作用。

安裝

  npm install --save styled-components

最基礎(chǔ)的用法

在下面這個例子中，我們用styled-components創(chuàng)建了一個樣式組件，該組件渲染之后是一個div標(biāo)簽。注意組件首字母必須大寫不然無法識別。

  /* 創(chuàng)建了一個Wrapper樣式組件，該組件渲染之后是一個div標(biāo)簽 */
  const Wrapper = styled.div`
    color: blue;
  `;

  /* Wrapper組件跟其余的react組件一樣，只不過現(xiàn)在他們有了自己的樣式 */
  render(
    <Wrapper>
        Hello World!
    </Wrapper>
  );

渲染結(jié)果如下：

styled-components-2-1.jpg

選擇器：標(biāo)簽名和類名

我們可以通過標(biāo)簽名和類名設(shè)置樣式組件中的html標(biāo)簽的樣式：

  const Wrapper = styled.div`
    /* 應(yīng)用于Wrapper組件本身和Wrapper組件里的所有html標(biāo)簽 */
    color: black;

    /* 應(yīng)用于Wrapper組件里的h3標(biāo)簽 */
    h3 {
    color: red
    }

    /* 應(yīng)用于Wrapper組件里的className為blue的html標(biāo)簽 */
    .blue {
    color: blue
    }
  `

  render(
    <Wrapper>
      <p>黑色 p 標(biāo)簽 </p>
      <h3>紅色 h3 標(biāo)簽</h3> 
      <p className="blue" >藍(lán)色 p 標(biāo)簽</p>
    </Wrapper>
  )

渲染結(jié)果如下：

styled-components-2-2.jpg

選擇器：偽類和偽元素

在styled-components同樣可以使用偽類和偽元素，使用方法和原生css一模一樣：

  const Thing = styled.button`

    color: blue;

    ::before {
      content: '?。?！';
    }

    :hover {
      color: red;
    }
  `

  render(
    <Thing>Hello world!</Thing>
  )

渲染結(jié)果如下：

styled-components-2-3.gif

嵌套

&符號表示引用主組件，注意體會加上&符號與不加的區(qū)別：

  const Thing = styled.div`
    /* 應(yīng)用于className為blue的Thing組件 */
    &.blue{
    color: blue;
    }

    /* 應(yīng)用于className為red的Thing組件里的所有子組件或者h(yuǎn)tml標(biāo)簽 */
    .red {
    color: red;
    }
  `

  render(
    <React.Fragment>
      <Thing className="blue" >Thing組件</Thing>
      <Thing>
      <p className="red" >p標(biāo)簽</p>
      </Thing>
    </React.Fragment>
  )

渲染結(jié)果如下：

styled-components-2-4.jpg

上下文選擇符

在styled-components同樣可以使用各類上下文選擇符：

  const Thing = styled.div`

    /* 應(yīng)用于緊鄰Thing組件的下一個Thing組件 */
    & + & {
    color: red;
    }

  `

  render(
    <React.Fragment>
      <Thing>第一個Thing組件</Thing>
      <Thing>第二個Thing組件</Thing>
    </React.Fragment>
  )

渲染結(jié)果如下：

styled-components-2-5.jpg

通過這幾個例子可以看出來，styled-components中的css寫法和原生的css寫法其實(shí)差別并不大。而今天剛剛介紹的其實(shí)這些僅僅是styled-components的冰山一角。基于react的組件化思想，用styled-components對樣式也進(jìn)行了組件化，這樣每個組件擁有了自己的功能，還擁有了自己的樣式，從而能夠?qū)崿F(xiàn)真正意義上的復(fù)用。react通過state來控制組件，而styled-components也可以通過state的改變來動態(tài)的改變組件的樣式。react和styled-components可以說是男才女貌了。

想要了解更多styled-components知識還是希望大家能夠去閱讀她的官方文檔。