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是行不通的，而且我不知道有什么好方法可以在由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}/>;
  }
}

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

3 个答案: