本文已整理到 Github，地址 ?? blog。

如果我的內容幫助到了您，歡迎點個 Star ?????? 鼓勵鼓勵 :) ~~

我希望我的內容可以幫助你。現在我專注于前端領域，但我也將分享我在有限的時間內看到和感受到的東西。

Styled Components 是一個 CSS-in-JS 庫，可讓您編寫常規 CSS 并將其附加到 JavaScript 組件。使用 styled-components，您可以使用您已經熟悉的 CSS，而不必學習新的樣式結構。

本文將介紹 Styled Components 的一些功能，并提供一些示例幫助您理解。

styles 繼承

我們可以通過簡單地將樣式組件傳遞給 styled 函數來繼承樣式組件的樣式。

import styled from 'styled-components'

const Div = styled.div`
  padding: 10px;
  color: palevioletred;
`

這里我們有一個 Div 樣式的組件。讓我們創建另一個 div 元素來繼承該組件的樣式。

const InheritedDiv = styled(Div)`
  border: 1px solid palevioletred;
`

InheritedDiv 將具有 Div 組件的樣式以及它自己的樣式。

padding: 10px;
color: palevioletred;
border: 1px solid palevioletred;

傳遞 props

props 可以傳遞給樣式化組件，就像它們與常規 React 組件（類或函數）一樣。這是可能的，因為樣式化組件實際上是 React 組件。

const Button = styled.button`
  padding: 2px 5px;
  color: white;
  border-radius: 3px;
`

const Div = styled.div`
  padding: 10px;
  color: palevioletred;
  border: 1px solid palevioletred;
`

styled-components 創建了一個 React 組件，該組件渲染與 styled 對象中的屬性相對應的 HTML 標簽。

Button 將創建并渲染 button HTML 標簽，而 Div 將創建并渲染 div 標簽。它們是組件，所以我們可以向它們傳遞 props。

<Button color="black">Click Me</Button>
<Div borderColor="green"></Div>

這將使樣式化組件將包含 color 的 props 傳遞給 Button 組件，并將包含 borderColor 的 props 傳遞給 Div 組件。然后，我們可以使用一個函數在標簽的模板字符串中獲取 props。

const Button = styled.button`
  padding: 2px 5px;
  color: ${(props) => (props.color ? props.color : 'white')};
  border-radius: 3px;
`

const Div = styled.div`
  padding: 10px;
  color: palevioletred;
  border: 1px solid
    ${(props) => (props.borderColor ? props.borderColor : 'palevioletred')};
`

標簽模板字符串中的函數將接收一個 props 參數，它是傳遞給組件的 props。這使我們能夠引用傳遞給 Button 和 Div 組件的 color 和 borderColor，從而使樣式化組件的樣式具有動態性。

主題化

styled-components 提供主題化功能，使您能夠支持多種外觀。

為此，我們將使用 ThemeProvider 組件。

import { ThemeProvider } from 'styled-components'  

讓我們設置一個主題對象來保存我們想要應用于樣式化組件的 CSS 樣式。

const theme = {
  boderColor: 'plum',
  color: 'plum',
  bgColor: 'plum'
}

主題對象保存 border-color、color 和 bgColor 的顏色。

現在，我們有兩個組件：Button 和 Div。讓我們使用它們的主題。

const Button = styled.button`
  padding: 2px 5px;
  color: ${(props) => props.theme.color};
  border-radius: 3px;
`

const Div = styled.div`
  padding: 10px;
  color: ${(props) => props.theme.color};
  border: 1px solid ${(props) => props.theme.borderColor};
`

如您所見，他們正在訪問 props 中的主題屬性。ThemeProvider 將主題對象作為 props 傳遞給組件。

最后，我們將渲染 ThemeProvider 標簽之間的 Div 和 Button 組件，并將主題對象傳遞給 ThemeProvider 中的主題 props。

<ThemeProvider theme={theme}>
  <Div>
    <Button>Click Me</Button>
  </Div>
</ThemeProvider>

theme 對象將在他們的 props 中提供給 ThemeProvider 的孩子。

現在，如果我們更改主題對象中的任何屬性值，那么 ThemeProvider 將把更改傳遞給子對象，Div 和 Button 將相應地更改它們的樣式。

全局樣式

到目前為止，我們所做的大部分樣式都是特定于組件的。styled-components 框架還允許您創建應用于所有樣式化組件的全局樣式。

創建一個 globalStyles.js 文件，導入 createGlobalStyle 并編寫全局樣式。

import { createGlobalStyle } from 'styled-components'

export default createGlobalStyle`
  html {
    margin: 0;
  }

  body {
    margin: 0;
  }
`

接下來，將其導入 main 組件中。

import GlobalStyle from "./globalStyles"

function Home() {
  return (
    <div>
      <GlobalStyle />
      {/* 其他組件 */}
    </div>
  )
}

GlobalStyle 會在其余組件之前被渲染。這將在 GlobalStyle 之后的所有組件應用全局樣式。

切換組件類型

樣式化組件本質上是動態的。它們可以從創建和渲染一個 HTML 元素更改為另一個。

const Button = styled.button`
  padding: 2px 5px;
  color: ${(props) => props.theme.color};
  border-radius: 3px;
`

Button 組件將創建并渲染一個按鈕元素。在渲染按鈕組件時，我們可以通過將 as props 傳遞給 Button 組件，并使用我們希望它更改為的任何 HTML 標簽名來更改它。

<Button as="a">Click Me</Button>

這將創建并渲染 a 標簽。as="a" 將其從渲染 Button 元素更改為呈現 a 標簽。

這也可以使用 withComponent 方法完成。

const Button = styled.button`
  padding: 2px 5px;
  color: palevioletred;
  border-radius: 3px;
`

const Link = Button.withComponent('a')

Link 是一個樣式化的組件，它將渲染 a 標簽，并應用 Button 的 CSS 樣式。

樣式化常規組件

通過使用組件調用 styled() 方法，然后使用包含樣式代碼的模板祝福詞，可以將常規組件轉換為樣式化組件。

function Button(props) {
  return <button className={props.className}>{props.children}</button>
}

這里我們有一個 Button 組件，它渲染一個按鈕元素。請注意，我們為按鈕元素設置了一個 className 屬性，并將其值分配給 props.className。因此繼承的樣式將應用于按鈕元素。

要將此組件轉換為樣式化組件，請將其傳遞給 styled() 方法。

Button = styled(Button)`
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid palevioletred;
`

這將使用模板字符串中的 CSS 樣式設置 Button 組件中的按鈕元素的樣式。Button 將使用以下 CSS 代碼渲染按鈕元素。

padding: 2px 5px;
border-radius: 3px;
border: 1px solid palevioletred;

指定屬性

您可以向樣式化組件渲染的 HTML 元素添加屬性。

例如，可以創建如下 Input 組件：

const Input = styled.input`
  font-size: 14px;
  padding: 2px 5px;
  border: 1px solid green;
`

Input 將渲染和輸入元素。輸入元素有不同的類型，包括：

• text
• number
• password
• email

這些是在輸入元素中使用 type屬性指定的。要告訴 styled-component 您想要的輸入元素類型，請使用 attrs 方法。

const Input = styled.input.attrs({
  type: 'text'
})`
  font-size: 14px;
  padding: 2px 5px;
  border: 1px solid green;
`

這將創建一個 text 類型的輸入元素。我們還可以向樣式化組件添加其他屬性。

const Input = styled.input.attrs({
  type: 'text',
  placeholder: '在此處輸入賬號'
})`
  font-size: 14px;
  padding: 2px 5px;
  border: 1px solid plum;
`

const PasswordInput = styled.input.attrs({
  type: 'password',
  placeholder: '在此處輸入密碼'
})`
  font-size: 14px;
  padding: 2px 5px;
  border: 1px solid plum;
`

與其他 CSS 框架一起使用

最后，您可以將 styled-components 用于任何 CSS 框架。

例如，讓我們創建一個具有 Bootstrap 樣式的 Button 組件。

const PrimaryButton = styled.button.attrs({
  className: 'btn btn-prmiary'
})`
  outline: none;
`

我們使用 attrs 方法向具有 btn、btn-primary 值的組件添加 className 屬性。這將使 Bootstrap 將其樣式應用于組件。

其他 CSS 框架也是如此。

const MatButton = styled.button.attrs({
  className: 'mat-button'
})`
  outline: none;
`

上面的例子是一個 Material Design 風格的組件。