const Button = styled.a<{ $primary?: boolean; }>`
  --accent-color: white;


  /* This renders the buttons above... Edit me! */
  background: transparent;
  border-radius: 3px;
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
  display: inline-block;
  margin: 0.5rem 1rem;
  padding: 0.5rem 0;
  transition: all 200ms ease-in-out;
  width: 11rem;


  &:hover {
    filter: brightness(0.85);
  }


  &:active {
    filter: brightness(1);
  }


  /* The GitHub button is a primary button
   * edit this to target it specifically! */
  ${props => props.$primary && css`
    background: var(--accent-color);
    color: black;
  `}
`

開始使用

安裝

要下載 styled-components，請執行

npm install styled-components

這樣就完成了！您現在可以在您的應用程式中使用它了！（是的，不需要建置步驟 👌）

您的第一個 styled component

假設您想要創建一個簡單且可重複使用的 <Button /> 元件，您可以在整個應用程式中使用它。應該有一個普通版本和一個大的、primary 版本，用於重要的按鈕。渲染後應該如下所示：（這是一個實際範例，點擊它們！）

首先，讓我們導入 styled-components 並創建一個 styled.button

import styled from 'styled-components'


const Button = styled.button``

這裡的 Button 變數現在是一個 React 元件，您可以像使用其他 React 元件一樣使用它！這種不尋常的反引號語法是一個新的 JavaScript 功能，稱為 標記模板字面值。

您知道如何使用括號調用函數嗎？（myFunc()）現在，您也可以使用反引號調用函數！（進一步了解標記模板字面值）

如果您現在渲染我們可愛的元件（就像任何其他元件一樣：<Button />），您將獲得

它渲染了一個按鈕！但這不是一個很漂亮的按鈕 😕 我們可以做得更好，讓我們給它一些樣式，展現它隱藏的美麗！

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid #BF4F74;
  color: #BF4F74;
  margin: 0 1em;
  padding: 0.25em 1em;
`

如您所見，styled-components 允許您在 JavaScript 中編寫實際的 CSS。這表示您可以使用您喜愛的所有 CSS 功能，包括（但不限於）媒體查詢、所有偽選擇器、嵌套等等。

最後一步，我們需要定義主要按鈕的外觀。為此，我們還從 styled-components 導入 { css } 並將一個函數插入到我們的模板字面值中，該函數將接收我們元件的 props

import styled, { css } from 'styled-components'


const Button = styled.button<{ $primary?: boolean; }>`
  background: transparent;
  border-radius: 3px;
  border: 2px solid #BF4F74;
  color: '#BF4F74';
  margin: 0 1em;
  padding: 0.25em 1em;


  ${props =>
    props.$primary &&
    css`
      background: '#BF4F74';
      color: white;
    `};
`

這裡我們的意思是，當設置了 $primary 屬性時，我們想要向我們的元件添加更多 css，在本例中更改背景和顏色。

就這樣，我們完成了！看看我們完成的元件

const Button = styled.button<{ $primary?: boolean; }>`
  background: transparent;
  border-radius: 3px;
  border: 2px solid #BF4F74;
  color: #BF4F74;
  margin: 0.5em 1em;
  padding: 0.25em 1em;


  ${props => props.$primary && css`
    background: #BF4F74;
    color: white;
  `}
`;


const Container = styled.div`
  text-align: center;
`


render(
  <Container>
    <Button>Normal Button</Button>
    <Button $primary>Primary Button</Button>
  </Container>
);
const Button = styled.button<{ $primary?: boolean; }>`
  background: transparent;
  border-radius: 3px;
  border: 2px solid #BF4F74;
  color: #BF4F74;
  margin: 0.5em 1em;
  padding: 0.25em 1em;

  ${props => props.$primary && css`
    background: #BF4F74;
    color: white;
  `}
`;

const Container = styled.div`
  text-align: center;
`

render(
  <Container>
    <Button>Normal Button</Button>
    <Button $primary>Primary Button</Button>
  </Container>
);
Normal ButtonPrimary Button

真棒 😍 這也是一個即時更新的編輯器，所以可以稍微玩弄一下，感受使用 styled-components 的感覺！準備好後，請深入閱讀文件，了解 styled-components 可以為您做的所有酷炫的事情

繼續閱讀下一頁

文件