时间戳

首页 > 解决方案 > 如何键入扩展样式组件？

reactjs - 如何键入扩展样式组件？

问题描述

Typescript@2.8.1 , styled-components@2.4.0

我需要有一个基本样式组件，.extend()用于创建类似的新组件，以避免代码重复。

我想出了以下不会引发任何错误的代码：

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

有没有办法export const B = A.extend用Bprops在这个级别上指定的属性重写行，就像我们在这里：export const A = styled<Aprops, 'div'>('div')？

就像，所以我不需要在组件的 declaratino 中需要的任何地方export const B = styled<Bprops & Aprops>(A)复制此代码。(props: Bprops)B

标签： reactjstypescripttypescript2.0styled-components

解决方案

似乎我找到了解决方案：

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

推荐阅读