一個(gè)輔助函數(shù)來(lái)生成一個(gè)特殊的 StyledComponent處理全球風(fēng)格。通常,樣式化的組件會(huì)自動(dòng)劃分為本地CSS類的范圍,因此會(huì)與其他組件隔離。如果是createGlobalStyle,此限制已消除,可以應(yīng)用CSS重置或基本樣式表之類的內(nèi)容。
爭(zhēng)論 | 描述 |
---|---|
1。 TaggedTemplateLiteral | 帶CSS和插值的帶標(biāo)記的模板文字。 |
返回一個(gè) StyledComponent那不接受孩子。將其放在React樹(shù)的頂部,并且在“渲染”組件時(shí)將注入全局樣式。
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>
自從 全球風(fēng)格 組件是一個(gè) 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>
一個(gè)幫助函數(shù),用于從帶有插值的模板文字生成CSS。如果由于帶標(biāo)簽的模板文字在JavaScript中的工作方式而返回的模板文字在插值內(nèi)具有函數(shù),則需要使用此函數(shù)。
如果要插入字符串,則僅在要插入函數(shù)時(shí)才需要使用它。
爭(zhēng)論 | 描述 |
---|---|
1。 TaggedTemplateLiteral | 帶CSS和插值的帶標(biāo)記的模板文字。 |
返回一個(gè)插值數(shù)組,該數(shù)組是可以作為插值本身傳遞的扁平數(shù)據(jù)結(jié)構(gòu)。
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,您將無(wú)法獲得預(yù)期的結(jié)果。
為動(dòng)畫創(chuàng)建關(guān)鍵幀的輔助方法。
爭(zhēng)論 | 描述 |
---|---|
1。 TaggedTemplateLiteral | 帶標(biāo)記的模板文字,其中包含您的關(guān)鍵幀。 |
返回要在動(dòng)畫聲明中使用的關(guān)鍵幀模型。您可以使用getName() 如果要獲取生成的動(dòng)畫名稱,請(qǐng)使用返回模型的API。
注意
在樣式組件v3及以下版本中, 關(guān)鍵幀 幫助程序直接返回動(dòng)畫名稱,而不是帶有的對(duì)象 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ī)則部分編寫,請(qǐng)確保使用 的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};
`
一個(gè)幫助程序組件,用于修改樣式的處理方式。對(duì)于給定的涉及樣式組件的子樹(shù),您可以自定義各種行為,例如CSS運(yùn)行時(shí)處理器(stylis)如何通過(guò)userland插件和選項(xiàng)覆蓋來(lái)處理樣式。
道具 | 描述 |
---|---|
disableCSSOMInjection(v5 +) | 切換到較慢的基于文本節(jié)點(diǎn)的CSS注入系統(tǒng),以向DOM添加樣式。與未升級(jí)為使用CSSOM API的樣式的第三方工具集成時(shí)非常有用。 |
disableVendorPrefixes(v5 +) | 選擇不給定的子樹(shù),為渲染的組件添加舊的CSS屬性。 |
片 | 待在前面的巨龍。如果需要高級(jí)SSR方案,請(qǐng)創(chuàng)建并提供自己的StyleSheet。 |
stylisPlugins(v5 +) | 在編譯期間由stylis運(yùn)行的一系列插件。查看npm上可用的內(nèi)容。 |
目標(biāo) | 待在前面的巨龍。提供一個(gè)備用DOM節(jié)點(diǎn)以注入樣式信息。 |
例如,如果您的應(yīng)用僅在現(xiàn)代瀏覽器中運(yùn)行,則您可能要禁用樣式的供應(yīng)商前綴:
// 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>
)
另一個(gè)示例是通過(guò)用戶域?yàn)闃邮絾⒂脧挠业阶蟮姆g 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>
)
用于識(shí)別樣式化組件的實(shí)用程序。
爭(zhēng)論 | 描述 |
---|---|
1。 功能 | 任何預(yù)期可能是樣式化組件或包裝在樣式化組件中的React組件的函數(shù) |
如果傳遞的函數(shù)是有效的樣式化組件包裝的組件類,則返回true。這對(duì)于確定是否需要包裝組件以便可以用作組件選擇器很有用:
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;
}
`
用于識(shí)別樣式化組件的實(shí)用程序。
爭(zhēng)論 | 描述 |
---|---|
1.功能 | 任何預(yù)期可能是樣式化組件或包裝在樣式化組件中的React組件的函數(shù) |
如果傳遞的函數(shù)是有效的樣式化組件包裝的組件類,則返回true。這對(duì)于確定是否需要包裝組件以便可以用作組件選擇器很有用:
import { withTheme } from 'styled-components'
class MyComponent extends React.Component {
render() {
console.log('Current theme: ', this.props.theme)
// ...
}
}
export default withTheme(MyComponent)
這是由創(chuàng)建的“消費(fèi)者”組件React.createContext 作為...的配套組件 主題提供者。它使用渲染道具模式來(lái)允許在渲染過(guò)程中動(dòng)態(tài)訪問(wèn)主題。
它通過(guò)當(dāng)前主題(基于 主題提供者作為子函數(shù)的參數(shù)。通過(guò)此函數(shù),您可以返回進(jìn)一步的JSX或不返回任何內(nèi)容。
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>
)
}
}
更多建議: