Question

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')？

与export const B = styled<Bprops & Aprops>(A)一样，因此我不需要在组件(props: Bprops)的declaratino中需要复制此代码B。

Answer 1

似乎我找到了解决方案：

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

如何输入扩展样式组件？

1 个答案: