Как набрать расширенный стиль-компонент? - PullRequest
Новая
       19

Как набрать расширенный стиль-компонент?

0 голосов
/ 24 апреля 2018

Typescript@2.8.1, styled-components@2.4.0

Мне нужен один базовый стиль-компонент, который будет .extend() edчтобы создать новые, похожие на другие, чтобы избежать дублирования кода.

Я создал следующий код, который не выдает никаких ошибок: 

export interface Aprops {
  icon?: string;
}

export const A = styled<Aprops, 'div'>('div')`
  padding: ${(props) => (props.icon ? '10px' : '4px')};
`;

export interface Bprops {
  darkBackground?: boolean;
}

export const B = A.extend`
  background-color: ${(props: Bprops) =>
    props.darkBackground ? 'grey' : 'white'};
`;

function test() {
  return (
    <React.Fragment>
      <A icon="str1" />
      <B icon="str2" darkBackground />
    </React.Fragment>
  );
}

Isесть способ переписать строку export const B = A.extend с Bprops свойствами, указанными на этом уровне, как у нас здесь: export const A = styled<Aprops, 'div'>('div')?

Как и export const B = styled<Bprops & Aprops>(A), поэтому мне не нужно дублироватьэтот код (props: Bprops) везде, где мне нужно, внутри объявления компонента B.

1 Ответ

0 голосов
/ 24 апреля 2018

Кажется, я нашел решение: 

export const B = styled<Aprops & Bprops>(A)`
  background-color: ${props =>
    props.darkBackground ? 'grey' : 'white'};
`;
...