styled-components 以前的API

[不推薦使用]  .extend延伸

注意

的 。延伸API已在樣式組件v4中刪除。用styled（StyledComponent）代替。

這是一種創(chuàng)建新 StyledComponent 并擴展其規(guī)則。

import styled from 'styled-components'

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

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

返回一個新的 StyledComponent 將新規(guī)則合并到調(diào)用此方法的組件中。

[不推薦使用] 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;
  }
`

我們不鼓勵使用此功能。如果需要，請嘗試在每個應(yīng)用程序中最多使用一個文件。這是一個逃生艙口。僅用于稀有@ font-face 定義或身體樣式。

[不推薦使用] innerRef" prop

“innerRef” 支柱

注意

的 “ innerRef”在樣式組件v4中刪除了prop以支持React 16forwardRefAPI。只要用正常參考 道具代替。

通過 參考 樣式組件的道具會給您一個實例 StyledComponent包裝器，但不包裝到基礎(chǔ)DOM節(jié)點。這是由于ref的工作方式。不可能調(diào)用DOM方法，例如焦點，直接在我們的包裝上。

要獲得對實際包裝的DOM節(jié)點的引用，請將回調(diào)傳遞給 innerRef 道具代替。

注意

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

這個例子使用 innerRef 將ref保存到樣式輸入中，并在用戶將鼠標(biāo)懸停在其上時將其聚焦。

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()}
      />
    )
  }
}