styled-components Helper

createGlobalStyle v4僅網絡

一個輔助函數(shù)來生成一個特殊的 StyledComponent處理全球風格。通常，樣式化的組件會自動劃分為本地CSS類的范圍，因此會與其他組件隔離。如果是createGlobalStyle，此限制已消除，可以應用CSS重置或基本樣式表之類的內容。

返回一個 StyledComponent那不接受孩子。將其放在React樹的頂部，并且在“渲染”組件時將注入全局樣式。

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
  }
`

// later in your app

<React.Fragment>
  <GlobalStyle whiteColor />
  <Navigation /> {/* example of other top-level stuff */}
</React.Fragment>

自從 全球風格 組件是一個 StyledComponent。

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

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
    font-family: ${props => props.theme.fontFamily};
  }
`

// later in your app

<ThemeProvider theme={{ fontFamily: 'Helvetica Neue' }}>
  <React.Fragment>
    <Navigation /> {/* example of other top-level stuff */}
    <GlobalStyle whiteColor />
  </React.Fragment>
</ThemeProvider>

CSS

一個幫助函數(shù)，用于從帶有插值的模板文字生成CSS。如果由于帶標簽的模板文字在JavaScript中的工作方式而返回的模板文字在插值內具有函數(shù)，則需要使用此函數(shù)。

如果要插入字符串，則僅在要插入函數(shù)時才需要使用它。

返回一個插值數(shù)組，該數(shù)組是可以作為插值本身傳遞的扁平數(shù)據(jù)結構。

import styled, { css } from 'styled-components'

const complexMixin = css`
  color: ${props => (props.whiteColor ? 'white' : 'black')};
`

const StyledComp = styled.div`
  /* This is an example of a nested interpolation */
  ${props => (props.complex ? complexMixin : 'color: blue;')};
`

如果不使用css，您的功能將是 toString（）ed，您將無法獲得預期的結果。

關鍵幀 僅網絡

為動畫創(chuàng)建關鍵幀的輔助方法。

返回要在動畫聲明中使用的關鍵幀模型。您可以使用getName（） 如果要獲取生成的動畫名稱，請使用返回模型的API。

注意

在樣式組件v3及以下版本中， 關鍵幀 幫助程序直接返回動畫名稱，而不是帶有的對象 getName 方法。

import styled, { keyframes } from 'styled-components'

const fadeIn = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`

const FadeInButton = styled.button`
  animation: 1s ${fadeIn} ease-out;
`

如果您將樣式規(guī)則部分編寫，請確保使用 的CSS 幫手。

import styled, { css, keyframes } from 'styled-components'

const pulse = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`

const animation = props =>
  css`
    ${pulse} ${props.animationLength} infinite alternate;
  `

const PulseButton = styled.button`
  animation: ${animation};
`

StyleSheetManager

一個幫助程序組件，用于修改樣式的處理方式。對于給定的涉及樣式組件的子樹，您可以自定義各種行為，例如CSS運行時處理器（stylis）如何通過userland插件和選項覆蓋來處理樣式。

例如，如果您的應用僅在現(xiàn)代瀏覽器中運行，則您可能要禁用樣式的供應商前綴：

// import styled, { StyleSheetManager } from 'styled-components'
const Box = styled.div`
  color: ${props => props.theme.color};
  display: flex;
`
render(
  <StyleSheetManager disableVendorPrefixes>
    <Box>If you inspect me, there are no vendor prefixes for the flexbox style.</Box>
  </StyleSheetManager>
)

另一個示例是通過用戶域為樣式啟用從右到左的翻譯 stylis-plugin-rtl 插入：

// import styled, { StyleSheetManager } from 'styled-components'
// import stylisRTLPlugin from 'stylis-plugin-rtl';

const Box = styled.div`
  background: mediumseagreen;
  border-left: 10px solid red;
`

render(
  <StyleSheetManager stylisPlugins={[stylisRTLPlugin]}>
    <Box>My border is now on the right!</Box>
  </StyleSheetManager>
)

isStyledComponent

用于識別樣式化組件的實用程序。

如果傳遞的函數(shù)是有效的樣式化組件包裝的組件類，則返回true。這對于確定是否需要包裝組件以便可以用作組件選擇器很有用：

import React from 'react'
import styled, { isStyledComponent } from 'styled-components'
import MaybeStyledComponent from './somewhere-else'

let TargetedComponent = isStyledComponent(MaybeStyledComponent)
  ? MaybeStyledComponent
  : styled(MaybeStyledComponent)``

const ParentComponent = styled.div`
  color: cornflowerblue;

  ${TargetedComponent} {
    color: tomato;
  }
`

isStyledComponent

用于識別樣式化組件的實用程序。

如果傳遞的函數(shù)是有效的樣式化組件包裝的組件類，則返回true。這對于確定是否需要包裝組件以便可以用作組件選擇器很有用：

import { withTheme } from 'styled-components'

class MyComponent extends React.Component {
  render() {
    console.log('Current theme: ', this.props.theme)
    // ...
  }
}

export default withTheme(MyComponent)

ThemeConsumer v4

這是由創(chuàng)建的“消費者”組件React.createContext 作為...的配套組件 主題提供者。它使用渲染道具模式來允許在渲染過程中動態(tài)訪問主題。

它通過當前主題（基于 主題提供者作為子函數(shù)的參數(shù)。通過此函數(shù)，您可以返回進一步的JSX或不返回任何內容。

import { ThemeConsumer } from 'styled-components'
export default class MyComponent extends React.Component {
  render() {
    return (
      <ThemeConsumer>
        {theme => <div>The theme color is {theme.color}.</div>}
      </ThemeConsumer>
    )
  }
}