子组件的类型定义

时间:2019-07-14 09:11:06

标签: reactjs typescript styled-components

我已经为样式化的组件定义了子组件,并且正在尝试为其提供类型定义-TSC抱怨'StyledComponentClass'类型上不存在'Property'PrimaryText'。对于“ SubText”也是如此。

export const Tab = styled(NavLink)`
    border: 1px solid rgba(0, 119, 204, 0.5);
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08), 0 2px 15px 0 rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    height: 60px;
    min-width: 125px;
    padding: 10px 15px;
    cursor: pointer;
`;

Tab.PrimaryText = styled(Box)`
    height: 22px;
    color: #3d464d;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
`;

Tab.SubText = styled(Box)`
    height: 15px;
    color: #525d66;
    font-size: 11px;
    line-height: 15px;
`;

如何指定类型?环顾四周。几乎没有参考。

1 个答案:

答案 0 :(得分:0)

您要通过此方法实现什么?您可以使用一些复杂的方法来创建合并类型,但这似乎并不值得。

这样的事情不是一种选择吗?唯一的区别是Tab样式的使用现在改为Tab.Main(或任何您称呼的样式)。

export const Tab = {
  Main: styled(NavLink)`
    border: 1px solid rgba(0, 119, 204, 0.5);
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08), 0 2px 15px 0 rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    height: 60px;
    min-width: 125px;
    padding: 10px 15px;
    cursor: pointer;
  `,
  PrimaryText: styled(Box)`
    height: 22px;
    color: #3d464d;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
  `,
  SubText: styled(Box)`
    height: 15px;
    color: #525d66;
    font-size: 11px;
    line-height: 15px;
  `,
};