styled-components 以前的API

[不推荐使用]  .extend延伸

注意

的 。延伸API已在样式组件v4中删除。用styled（StyledComponent）代替。

这是一种创建新 StyledComponent 并扩展其规则。

import styled from 'styled-components'

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

const Component2 = Component.extend`
  background: white;
  color: blue;
`

返回一个新的 StyledComponent 将新规则合并到调用此方法的组件中。

[不推荐使用] injectGlobal注入全局

注意

的 注入全局 API已删除并替换为 createGlobalStyle 在样式化组件v4中。

编写全局CSS的辅助方法。它不返回组件，而是将样式直接添加到样式表中。

import { injectGlobal } from 'styled-components'

injectGlobal`
  @font-face {
    font-family: "Operator Mono";
    src: url("../fonts/Operator-Mono.ttf");
  }

  body {
    margin: 0;
  }
`

我们不鼓励使用此功能。如果需要，请尝试在每个应用程序中最多使用一个文件。这是一个逃生舱口。仅用于稀有@ font-face 定义或身体样式。

[不推荐使用] innerRef" prop

“innerRef” 支柱

注意

的 “ innerRef”在样式组件v4中删除了prop以支持React 16forwardRefAPI。只要用正常参考 道具代替。

通过 参考 样式组件的道具会给您一个实例 StyledComponent包装器，但不包装到基础DOM节点。这是由于ref的工作方式。不可能调用DOM方法，例如焦点，直接在我们的包装上。

要获得对实际包装的DOM节点的引用，请将回调传递给 innerRef 道具代替。

注意

我们不支持字符串引用（即 innerRef =“ node”），因为它们已在React中弃用。

这个例子使用 innerRef 将ref保存到样式输入中，并在用户将鼠标悬停在其上时将其聚焦。

const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  color: palevioletred;
  background: papayawhip;
  border: none;
  border-radius: 3px;
`

class Form extends React.Component {
  render() {
    return (
      <Input
        placeholder="Hover here..."
        innerRef={x => {
          this.input = x
        }}
        onMouseEnter={() => this.input.focus()}
      />
    )
  }
}