styled-components TypeScript

TypeScript

styled-components具有来自DefinitelyTyped的社区组织的TypeScript定义，以允许该库在任何TypeScript项目中使用。要安装它们，请运行：

npm install @types/styled-components

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

创建一个声明文件

自版本以来，可以通过使用声明合并来扩展样式组件的TypeScript定义。v4.1.4 的定义。

因此，第一步是创建一个声明文件。命名吧风格的 例如。

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

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

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

默认主题 被用作 道具主题盒子外面。默认情况下，界面默认主题 是空的，所以这就是我们需要扩展它的原因。

创建一个主题

现在，我们可以使用 默认主题 在上述步骤中声明。

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

造型组件

而已！只需使用任何原始导入，我们就可以使用样式化组件。

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};
`;

使用自定义道具

如果要将自定义属性传递给样式化的组件，则最好将类型参数传递给这样的标记模板（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};
`

您将需要定义自定义道具和将使用的标签类型。传递自定义组件时，不需要标记类型。

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)}
`

如果不应该将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)}
`)

这是最复杂的示例，其中我们具有用于组件样式的特定属性，并通过Header传递其余所需的属性。这意味着当您使用Title时，它将同时具有样式要求和实际组件要求的组合类型。

类名警告

定义组件时，您需要标记 班级名称 作为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;
`

功能组件警告

要使用功能组件并对道具进行类型检查，您需要定义组件及其类型。这对样式化组件并不特殊，这就是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};
`