子组件的类型定义

Question

I have defined sub-components to my styled component, and am trying to provide type definitions for it - TSC complains 'Property 'PrimaryText' does not exist on type 'StyledComponentClass'. Similarly for '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;
`;

How do I go about specifying the types? Looked around a lot. There's hardly any reference.

Answer 1

What are you trying to achieve by doing this? There are some convoluted ways you could use to create a merged type but it really doesn't seem worth it.

Would something like this not be an option? The only difference being the usage of the Tab style is now Tab.Main (or whatever you call it) instead.

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