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 组件

假设你想要创建一个简单且可复用的 <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 可以为你做的所有酷事

继续下一頁

文档