styled-components TypeScript

TypeScript

styled-components具有來自DefinitelyTyped的社區(qū)組織的TypeScript定義，以允許該庫在任何TypeScript項(xiàng)目中使用。要安裝它們，請(qǐng)運(yùn)行：

npm install @types/styled-components

在開始有效使用TypeScript之前，您需要做一些配置。

創(chuàng)建一個(gè)聲明文件

自版本以來，可以通過使用聲明合并來擴(kuò)展樣式組件的TypeScript定義。v4.1.4 的定義。

因此，第一步是創(chuàng)建一個(gè)聲明文件。命名吧風(fēng)格的 例如。

// import original module declarations
import 'styled-components'

// and extend them!
declare module 'styled-components' {
  export interface DefaultTheme {
    borderRadius: string

    colors: {
      main: string
      secondary: string
    }
  }
}

默認(rèn)主題 被用作 道具主題盒子外面。默認(rèn)情況下，界面默認(rèn)主題 是空的，所以這就是我們需要擴(kuò)展它的原因。

創(chuàng)建一個(gè)主題

現(xiàn)在，我們可以使用 默認(rèn)主題 在上述步驟中聲明。

// my-theme.ts

import { DefaultTheme } from 'styled-components'
const myTheme: DefaultTheme = {
  borderRadius: '5px',
  colors: {
    main: 'cyan',
    secondary: 'magenta',
  },
}
export { myTheme }

React-Native:

// styled-components.ts
import * as styledComponents from "styled-components/native";

import ThemeInterface from "./theme";

const {
  default: styled,
  css,
  ThemeProvider
} = styledComponents as styledComponents.ReactNativeThemedStyledComponentsModule<ThemeInterface>;

export { css, ThemeProvider };
export default styled;

造型組件

而已！只需使用任何原始導(dǎo)入，我們就可以使用樣式化組件。

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

// theme is now fully typed
export const MyComponent = styled.div`
  color: ${props => props.theme.colors.main};
`;

// theme is also fully typed
export MyGlobalStyle = createGlobalStyle`
  body {
    background-color: ${props => props.theme.colors.secondary};
  }
`;

// and this theme is fully typed as well
export cssHelper = css`
  border: 1px solid ${props => props.theme.borderRadius};
`;

使用自定義道具

如果要將自定義屬性傳遞給樣式化的組件，則最好將類型參數(shù)傳遞給這樣的標(biāo)記模板（TypeScriptv2.9 +是必需的）

import styled from 'styled-components';
import Header from './Header';

interface TitleProps {
  readonly isActive: boolean;
};

const Title = styled.h1<TitleProps>`
  color: ${props => props.isActive ? props.theme.colors.main : props.theme.colors.secondary};
`

const NewHeader = styled(Header)<{ customColor: string }>`
  color: ${props => props.customColor};
`

您將需要定義自定義道具和將使用的標(biāo)簽類型。傳遞自定義組件時(shí)，不需要標(biāo)記類型。

import styled from 'styled-components'
import Header from './Header'

const Title =
  styled <
  { isActive: boolean } >
  Header`
  color: ${props => (props.isActive ? props.theme.primaryColor : props.theme.secondaryColor)}
`

如果不應(yīng)該將isActive屬性傳遞給Header組件，則必須使用以下約定將其提取：

import styled from 'styled-components'
import Header, { Props as HeaderProps } from './Header'

const Title =
  styled <
  { isActive: boolean } >
  (({ isActive, ...rest }) => <Header {...rest} />)`
  color: ${props => (props.isActive ? props.theme.primaryColor : props.theme.secondaryColor)}
`

但這可能是相反的。也許您的樣式化組件需要代理Header所需的道具。然后您遵循以下約定：

import styled from 'styled-components'
import Header, { Props as HeaderProps } from './Header'

const Title =
  (styled < { isActive: boolean }) &
  (HeaderProps >
    (({ isActive, ...rest }) => <Header {...rest} />)`
  color: ${props => (props.isActive ? props.theme.primaryColor : props.theme.secondaryColor)}
`)

這是最復(fù)雜的示例，其中我們具有用于組件樣式的特定屬性，并通過Header傳遞其余所需的屬性。這意味著當(dāng)您使用Title時(shí)，它將同時(shí)具有樣式要求和實(shí)際組件要求的組合類型。

類名警告

定義組件時(shí)，您需要標(biāo)記 班級(jí)名稱 作為Props界面中的可選：

interface LogoProps {
  /* This prop is optional, since TypeScript won't know that it's passed by the wrapper */
  className?: string;
}

class Logo extends React.Component<LogoProps, {}> {
  render() {
    return <div className={this.props.className}>Logo</div>
  }
}

const LogoStyled = styled(Logo)`
  font-family: 'Helvetica';
  font-weight: bold;
  font-size: 1.8rem;
`

功能組件警告

要使用功能組件并對(duì)道具進(jìn)行類型檢查，您需要定義組件及其類型。這對(duì)樣式化組件并不特殊，這就是React的工作方式：

interface BoxProps {
  theme?: ThemeInterface;
  borders?: boolean;
  className?: string;
}

const Box: React.FunctionComponent<BoxProps> = props => <div className={props.className}>{props.children}</div>

const StyledBox = styled(Box)`
  padding: ${props => props.theme.lateralPadding};
`