styled-components 主體

風(fēng)格

這是默認(rèn)導(dǎo)出。這是我們用來創(chuàng)建styled.tagname 輔助方法。.

返回一個函數(shù)，該函數(shù)接受帶標(biāo)簽的模板文字并將其轉(zhuǎn)換為 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

這就是您傳遞給樣式調(diào)用的內(nèi)容-帶標(biāo)記的模板文字。這是ES6語言功能。您可以在“ 標(biāo)記的模板文字”部分中了解有關(guān)它們的更多信息 。

在“ 根據(jù)道具調(diào)整”部分中了解有關(guān)如何根據(jù)道具調(diào)整樣式的更多信息 。

傳遞給插值函數(shù)的屬性會附加一個特殊屬性， 主題，它是由更高級別的注入 主題提供者零件。有關(guān)更多信息，請查看“ 主題 ”部分。

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

您也可以從插值中返回對象或直接輸入對象，它們將被視為內(nèi)聯(lián)樣式。但是，強(qiáng)烈建議不要這樣做，因為CSS語法支持偽選擇器，媒體查詢，嵌套等，而對象語法則不支持。

StyledComponent

樣式化的React組件。致電時返回styled.tagname 要么 樣式化（組件） 與樣式。

該組件可以使用任何道具。如果它是有效屬性，則將其傳遞給HTML節(jié)點，否則僅將其傳遞給內(nèi)插函數(shù)。（請參見標(biāo)簽?zāi)０逦淖?/a>）

.attrs

這是一種可鏈接的方法，將一些道具附加到樣式化的組件上。第一個也是唯一的參數(shù)是一個對象，它將合并到組件的其余props中。的屬性 對象接受以下值：

返回另一個 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" />
  </>
)

“如” 多態(tài)道具 v4

如果您想保留已應(yīng)用到組件的所有樣式，而只想切換最終呈現(xiàn)的內(nèi)容（無論是其他HTML標(biāo)簽還是其他自定義組件），則可以使用 “如” 在運行時執(zhí)行此操作。

// 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節(jié)點或呈現(xiàn)給DOM元素，則可以在道具名稱前加一個美元符號（$），將其轉(zhuǎn)變?yōu)樗矐B(tài)道具。

在這個例子中 $draggable 不像DOM那樣呈現(xiàn)的 draggable 。

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

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

shouldForwardProp v5.1

與Transient props相比，這是一種更動態(tài)，更精細(xì)的過濾機(jī)制。在將多個高階組成部分組合在一起并碰巧共享相同道具名稱的情況下，它非常方便。shouldForwardProp 的工作方式非常類似于的謂詞回調(diào) 數(shù)組過濾器。測試失敗的道具不會像瞬態(tài)道具一樣傳遞給底層組件。

請記住，如本例所示，其他可鏈接方法應(yīng)始終在 .withConfig。

（可選） shouldForwardProp可以使用第二個參數(shù)來提供對默認(rèn)驗證器功能的訪問。此函數(shù)可以用作備用，當(dāng)然，它也可以像謂詞一樣工作，基于已知的HTML屬性進(jìn)行過濾。

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

有時，您不想只為了應(yīng)用一些樣式而創(chuàng)建額外的組件。的的CSSprop是一種方便的方法，可在您的組件上進(jìn)行迭代而無需解決固定的組件邊界。它適用于普通的HTML標(biāo)簽以及組件，并支持任何樣式組件支持的所有內(nèi)容，包括基于props，主題和自定義組件的適應(yīng)。

注意

為了支持 的CSS道具你必須使用Babel插件。

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

在后臺，Babel插件會將帶有 的CSS支撐到樣式化的組件中。例如，上面的代碼變?yōu)椋?/p>

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

請注意，您甚至不必添加導(dǎo)入，Babel插件會自動添加?。ǔ悄谑褂肂abel宏，請參見下文）

Babel宏的用法

您可以使用Babel宏在創(chuàng)建反應(yīng)應(yīng)用。不幸的是，Babel宏僅在導(dǎo)入時運行，因此無法自動添加導(dǎo)入。如果您將導(dǎo)入手動添加到宏，則上面的代碼可以完美地工作：

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 并在項目中添加以下導(dǎo)入一次：

import {} from 'styled-components/cssprop'