typescript - 样式组件 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

问题在于 TypeScript 3.0 对 defaultProps 的支持在检查 JSX 元素时需要 defaultProps 的类型在组件上声明。变异 defaultProps现有组件的不工作，我不知道有什么好方法来声明 defaultProps在由 styled 之类的函数生成的组件上. (从某种意义上说，这是有道理的:库创建了一个组件并且不希望您修改它。也许库甚至出于某些内部目的设置了 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}/>;
  }
}