样式组件 defaultProps

Question

如果我有以下带有 defaultProp 的按钮

export interface IButton {
  variant: 'action' | 'secondary';
}

export const Button = styled('button')<IButton>`
  background-color: #fff;

  ${props =>
    props.variant === 'action' &&
    css`
      color: blue;
    `};

  ${props =>
    props.variant === 'secondary' &&
    css`
      color: gray;
    `};
`;

Button.defaultProps = {
  variant: 'action',
};

有没有打字的方法？尝试使用它时

<Button>Hello</Button>

Typescript 抱怨没有传递变体，有没有办法用样式化的组件键入 defaultProps？

Answer 1

据我所知，这还不太可能，不幸的是，TS 3.0 中添加的 defaultProps 支持（仅适用于普通组件类和 我认为功能组件）。如果我在这方面有误，其他人可以随时纠正我。

不过，还有其他的写法。以下是我通常的做法：

export interface IButton {
  variant?: 'action' | 'secondary';
}

const variantStyles = {
  action: css`
    color: blue;
  `,
  secondary: css`
    color: gray;
  `,
};

export const Button = styled('button')<IButton>`
  background-color: #fff;
  ${props => variantStyles[props.variant || 'action']};
`;

Answer 2

问题在于 TypeScript 3.0 在检查 JSX 元素时对 defaultProps 的支持需要在组件上声明 defaultProps 的类型。改变现有组件的 defaultProps 是行不通的，而且我不知道有什么好方法可以在由 styled 这样的函数生成的组件上声明 defaultProps。（在某种程度上，这是有道理的：库创建了一个组件并且不希望您修改它。也许库甚至出于某些内部目的设置了 defaultProps 本身。）kingdaro 的解决方案很好，或者您可以使用包装器组件：

const Button1 = styled('button')<IButton>`
  background-color: #fff;

  ${props =>
    props.variant === 'action' &&
    css`
      color: blue;
    `};

  ${props =>
    props.variant === 'secondary' &&
    css`
      color: gray;
    `};
`;

export class Button extends React.Component<IButton> {
  static defaultProps = {
    variant: 'action'
  };
  render() {
    return <Button1 {...this.props}/>;
  }
}

Answer 3

你可以通过破坏你的道具来实现你想要的。

看来你还是得让你的组件知道它的 prop 类型。为此，只需传递所有道具而不破坏它们（参见下面的背景颜色）。

import styled from "styled-components";

interface IProps {
  variant?: 'action' | 'secondary';
}

export const Button = styled.div`
  ${(props: IProps) => `background-color: #fff;`}
  ${({ variant = 'action' }) => variant === 'action' ? `color: blue;` : `color: gray;`}
`;

样式组件 defaultProps

styled-components defaultProps

typescript

styled-components