樣式化的組件

樣式化組件是在現代JavaScript中使用CSS的新方法之一。它的目的是成為CSS模塊的繼任者,一種編寫範圍僅限於單個組件且不會洩漏到頁面中任何其他元素的CSS的方法

一個簡短的歷史

曾幾何時,Web真的很簡單,甚至CSS都不存在。我們使用桌子和框架。美好的時光。

然後CSS變得生動起來,一段時間後,人們逐漸意識到,框架可以極大地幫助您,尤其是在構建網格和佈局方面,Bootstrap和Foundation在其中發揮了重要作用。

像這樣的預處理器薩斯其他的幫助極大地減緩了框架的採用,並更好地組織了代碼,諸如邊界元SMACSS越來越多地使用,尤其是在團隊內部。

約定不是解決所有問題的方法,而且記住起來很複雜,因此在最近幾年中,隨著越來越多的人採用公約,JavaScript並在每個前端項目中構建流程,CSS找到了進入JavaScript的方式(CSS-in-JS)。

新工具探索了使用CSS-in-JS的新方法,其中一些成功並日漸流行:

  • 反應風格
  • jsxstyle

和更多。

引入樣式化的組件

這些工具中最受歡迎的一種是樣式化的組件

它是要成為的繼任者CSS模塊,這是一種編寫CSS的方法,該CSS的作用域僅限於單個組件,並且不會洩漏到頁面中的任何其他元素。

(有關CSS模塊的更多信息這裡這裡

樣式化組件使您可以在組件中編寫純CSS,而不必擔心類名衝突。

安裝

使用安裝樣式組件npm或者

npm install styled-components
yarn add styled-components

而已!現在,您要做的就是添加此導入:

import styled from 'styled-components'

您的第一個樣式化的組件

隨著styled對象導入後,您現在就可以開始創建樣式化組件了。這是第一個:

const Button = styled.button`
  font-size: 1.5em;
  background-color: black;
  color: white;
`

Button現在是反應發揮其最大作用。

我們使用樣式對象的功能(稱為button在這種情況下,並在其中傳遞了一些CSS屬性模板文字

現在可以使用正常的React語法在我們的容器中呈現此組件:

render(<Button />)

樣式化組件不僅提供其他功能,還可以用來創建其他組件button, 喜歡sectionh1input和許多其他。

帶有反引號的語法一開始可能很奇怪,但是它被稱為標記模板,它是純JavaScript,是將參數傳遞給函數的一種方式。

使用道具自定義組件

當您將一些道具傳遞給樣式組件時,它將把它們傳遞給DOM節點已安裝。

例如,這是我們通過placeholdertype道具input成分:

const Input = styled.input`
  //...
`

render( <div> <Input placeholder="…" type=“text” /> </div> )

這將按照您的想法進行操作,將這些道具作為HTML屬性插入。

道具而不是被盲目地傳遞給DOM也可以用於根據prop值定制組件。這是一個例子:

const Button = styled.button`
  background: ${props => (props.primary ? 'black' : 'white')};
  color: ${props => (props.primary ? 'white' : 'black')};
`

render( <div> <Button>A normal button</Button> <Button>A normal button</Button> <Button primary>The primary button</Button> </div> )

設置primaryprop更改按鈕的顏色。

擴展現有的樣式化組件

如果您有一個組件,並且想要創建一個類似的組件,並且樣式略有不同,則可以使用extend

const Button = styled.button`
  color: black;
  //...
`

const WhiteButton = Button.extend </span><span style="color:#e6db74"> color: white; </span><span style="color:#e6db74">

render( <div> <Button>A black button, like all buttons</Button> <WhiteButton>A white button</WhiteButton> </div> )

這是普通的CSS

在樣式化組件中,您可以使用已經了解和喜愛的CSS。這是純CSS。它不是偽CSS也不是內聯CSS,它有其局限性。

您可以使用媒體查詢,套料以及您可能需要的其他任何東西。

這是媒體查詢的示例:

const Button = styled.button`
  color: green;
  @media screen and (max-width: 800px) {
    color: black;
  }
`

使用供應商前綴

樣式化組件會自動添加所需的所有供應商前綴,因此您無需擔心此問題。

結論

這就是“樣式化組件”的介紹!這些概念將幫助您理解該概念,並通過在JavaScript中使用CSS的這種方式來幫助您入門和運行。

免費下載我的反應手冊


更多反應教程: