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;
  `}
`

入门(Getting started)

¥Getting started

安装(Installation)

¥Installation

要下载 styled-components，请运行：

¥To download styled-components run:

npm install styled-components

这就是你需要做的全部，你现在可以在你的应用中使用它了！（是的，无需构建步骤👌）

¥That's all you need to do, you are now ready to use it in your app! (yep, no build step needed 👌)

你的第一个样式组件(Your first styled component)

¥Your first styled component

假设你想要创建一个可以在整个应用中使用的简单且可重用的 <Button /> 组件。应该有一个普通版本和一个重要按钮的大版本和 primary 版本。渲染时应该是这样的：（这是一个活生生的例子，点击它们！）

¥Let's say you want to create a simple and reusable <Button /> component that you can use throughout your application. There should be a normal version and a big and primary version for the important buttons. This is what it should look like when rendered: (this is a live example, click on them!)

首先，让我们导入 styled-components 并创建一个 styled.button：

¥First, let's import styled-components and create a styled.button:

import styled from 'styled-components'


const Button = styled.button``

这里的 Button 变量现在是一个 React 组件，你可以像任何其他 React 组件一样使用它！这种不寻常的反引号语法是一种新的 JavaScript 功能，称为 标记模板字面量。

¥This Button variable here is now a React component that you can use like any other React component! This unusual backtick syntax is a new JavaScript feature called a tagged template literal.

你知道如何用括号调用函数吗？(myFunc())好吧，现在你还可以使用反引号调用函数！(了解有关标记模板字面量的更多信息)

¥You know how you can call functions with parenthesis? (myFunc()) Well, now you can also call functions with backticks! (learn more about tagged template literals)

如果你现在渲染我们可爱的组件（就像任何其他组件一样：<Button />），你将得到以下结果：

¥If you render our lovely component now (just like any other component: <Button />) this is what you get:

它渲染一个按钮！虽然这不是一个很好的按钮😕我们可以做得更好，让我们给它一些样式并激触发其中隐藏的美丽！

¥It renders a button! That's not a very nice button though 😕 we can do better than this, let's give it a bit of styling and tickle out the hidden beauty within!

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

正如你所看到的，样式组件允许你在 JavaScript 中编写实际的 CSS。这意味着你可以使用你使用和喜爱的 CSS 的所有功能，包括（但到目前为止不限于）媒体查询、所有伪选择器、嵌套等。

¥As you can see, styled-components lets you write actual CSS in your JavaScript. This means you can use all the features of CSS you use and love, including (but by far not limited to) media queries, all pseudo-selectors, nesting, etc.

最后一步是我们需要定义主按钮的外观。为此，我们还从 styled-components 导入 { css } 并将函数插入到我们的模板字面量中，该函数传递了组件的 props：

¥The last step is that we need to define what a primary button looks like. To do that we also import { css } from styled-components and interpolate a function into our template literal, which gets passed the props of our component:

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，在本例中更改背景和颜色。

¥Here we're saying that when the $primary property is set we want to add some more css to our component, in this case change the background and color.

就这样，我们完成了！看看我们完成的组件：

¥That's all, we're done! Take a look at our finished component:

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 可以为你做的所有很酷的事情：

¥Nice 😍 That's a live updating editor too, so play around with it a bit to get a feel for what it's like to work with styled-components! Once you're ready, dive into the documentation to learn about all the cool things styled-components can do for you:

继续下一页

文档