styleled-компоненты 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}/>;
  }
}

Answer 2

Вы можете достичь того, что хотите, разрушив свой реквизит.

Похоже, вы все еще должны сообщить своему компоненту о его типах пропеллера. Для этого просто пропустите все реквизиты, не разрушая их (см. Цвет фона внизу).

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

Answer 3

Насколько мне известно, это пока не совсем возможно, и, к сожалению, не охватывается поддержкой defaultProps, добавленной в TS 3.0 (которая применяется только к обычным классам компонентов и , я думаю, функционален компоненты). Другие не стесняются поправлять меня, если я ошибаюсь.

Есть и другие способы написать это. Вот как я обычно это делаю:

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