styled-components 主体

风格

这是默认导出。这是我们用来创建styled.tagname 辅助方法。.

ARGUMENTS	DESCRIPTION
1. component / tagname	Either a valid react component or a tagname like 'div'.

返回一个函数，该函数接受带标签的模板文字并将其转换为 StyledComponent

// import styled from 'styled-components'
const Button = styled.button`
  background: palevioletred;
  border-radius: 3px;
  border: none;
  color: white;
`
const TomatoButton = styled(Button)`
  background: tomato;
`
render(
  <>
    <Button>I'm purple.</Button>
    <br />
    <TomatoButton>I'm red.</TomatoButton>
  </>
)

TaggedTemplateLiteral

这就是您传递给样式调用的内容-带标记的模板文字。这是ES6语言功能。您可以在“ 标记的模板文字”部分中了解有关它们的更多信息 。

输入项	描述
规则	任何CSS规则（字符串）
插补	这可以是字符串，也可以是函数。字符串按原样与规则组合。函数将接收样式化组件的props作为第一个也是唯一的参数。

在“ 根据道具调整”部分中了解有关如何根据道具调整样式的更多信息 。

传递给插值函数的属性会附加一个特殊属性， 主题，它是由更高级别的注入 主题提供者零件。有关更多信息，请查看“ 主题 ”部分。

// import styled from 'styled-components'
const padding = '3em'
const Section = styled.section`
  color: white;
  /* Pass variables as inputs */
  padding: ${padding};
  /* Adjust the background from the properties */
  background: ${props => props.background};
`
render(
  <Section background="cornflowerblue">
    ✨ Magic
  </Section>
)

您也可以从插值中返回对象或直接输入对象，它们将被视为内联样式。但是，强烈建议不要这样做，因为CSS语法支持伪选择器，媒体查询，嵌套等，而对象语法则不支持。

StyledComponent

样式化的React组件。致电时返回styled.tagname 要么 样式化（组件） 与样式。

该组件可以使用任何道具。如果它是有效属性，则将其传递给HTML节点，否则仅将其传递给内插函数。（请参见标签模板文字）

您可以毫无问题地将任何类名传递给样式化的组件，它将被应用到样式化调用定义的样式旁边。（例如<MyStyledComp className =“ bootstrap__btn” />）

.attrs

这是一种可链接的方法，将一些道具附加到样式化的组件上。第一个也是唯一的参数是一个对象，它将合并到组件的其余props中。的属性 对象接受以下值：

价值观	描述
支撑值	这些可以是除功能以外的任何类型。它们将保持静态并将被合并到现有的组件prop中。
道具厂	一个函数，该函数接收传递到组件中的道具并计算一个值，然后将该值合并到现有的组件道具中。

返回另一个 StyledComponent

// import styled from 'styled-components'
const Input = styled.input.attrs(props => ({
  type: 'text',
  size: props.small ? 5 : undefined,
}))`
  border-radius: 3px;
  border: 1px solid palevioletred;
  display: block;
  margin: 0 0 1em;
  padding: ${props => props.padding};
  ::placeholder {
    color: palevioletred;
  }
`
render(
  <>
    <Input small placeholder="Small" />
    <Input placeholder="Normal" />
    <Input padding="2em" placeholder="Padded" />
  </>
)

“如” 多态道具 v4

如果您想保留已应用到组件的所有样式，而只想切换最终呈现的内容（无论是其他HTML标签还是其他自定义组件），则可以使用 “如” 在运行时执行此操作。

// import styled from "styled-components";

const Component = styled.div`
  color: red;
`;

render(
  <Component
    as="button"
    onClick={() => alert('It works!')}
  >
    Hello World!
  </Component>
)

"forwardedAs" prop v4.3

如果您选择使用 styled（） HOC也接受 “如” 道具，使用 “ forwardedAs” 将所需的道具传递到包裹的组件。

Transient props v5.1

如果要防止样式组件打算使用的道具传递到底层的React节点或呈现给DOM元素，则可以在道具名称前加一个美元符号（$），将其转变为瞬态道具。

在这个例子中 $draggable 不像DOM那样呈现的 draggable 。

const Comp = styled.div`
  color: ${props =>
    props.$draggable || 'black'};
`;

render(
  <Comp $draggable="red" draggable="true">
    Drag me!
  </Comp>
);

shouldForwardProp v5.1

与Transient props相比，这是一种更动态，更精细的过滤机制。在将多个高阶组成部分组合在一起并碰巧共享相同道具名称的情况下，它非常方便。shouldForwardProp 的工作方式非常类似于的谓词回调 数组过滤器。测试失败的道具不会像瞬态道具一样传递给底层组件。

请记住，如本例所示，其他可链接方法应始终在 .withConfig。

（可选） shouldForwardProp可以使用第二个参数来提供对默认验证器功能的访问。此函数可以用作备用，当然，它也可以像谓词一样工作，基于已知的HTML属性进行过滤。

ThemeProvider

用于主题化的辅助组件。通过上下文API将主题注入组件树中位于其下方任何位置的所有样式组件中。

道具	描述
主题	将被注入为 主题 提供程序下方的样式化组件中的所有插值。

// import styled, { ThemeProvider } from 'styled-components'

const Box = styled.div`
  color: ${props => props.theme.color};
`

render(
  <ThemeProvider theme={{ color: 'mediumseagreen' }}>
    <Box>I'm mediumseagreen!</Box>
  </ThemeProvider>
)

css prop v4

有时，您不想只为了应用一些样式而创建额外的组件。的的CSSprop是一种方便的方法，可在您的组件上进行迭代而无需解决固定的组件边界。它适用于普通的HTML标签以及组件，并支持任何样式组件支持的所有内容，包括基于props，主题和自定义组件的适应。

注意

为了支持 的CSS道具你必须使用Babel插件。

<div
  css={`
    background: papayawhip;
    color: ${props => props.theme.colors.text};
  `}
/>
<Button
  css="padding: 0.5em 1em;"
/>

在后台，Babel插件会将带有 的CSS支撑到样式化的组件中。例如，上面的代码变为：

<div
  css={`
    background: papayawhip;
    color: ${props => props.theme.colors.text};
  `}
/>
<Button
  css="padding: 0.5em 1em;"
/>

    

请注意，您甚至不必添加导入，Babel插件会自动添加！（除非您正在使用Babel宏，请参见下文）

Babel宏的用法

您可以使用Babel宏在创建反应应用。不幸的是，Babel宏仅在导入时运行，因此无法自动添加导入。如果您将导入手动添加到宏，则上面的代码可以完美地工作：

import styled from 'styled-components/macro'
<div
  css={`
    background: papayawhip;
    color: ${props => props.theme.colors.text};
  `}
/>
<Button
  css="padding: 0.5em 1em;"
/>

TypeScript的用法

为了防止TypeScript错误 的CSS 支撑任意元素，安装 @ types / styled-components 并在项目中添加以下导入一次：

import {} from 'styled-components/cssprop'