如何正确地使用带有typeComponents（）的样式组件的TS类型？

Question

我在Typescript环境中使用StyledComponent的StyledComponent withComponent()方法时遇到StyledComponent 。 我有一个简单的样式化组件，我想将其应用于React组件。 但是Typescript编译器抱怨道具不匹配。

我应该如何使用withComponent()方法来获取样式化的组件，该组件还具有我的react组件的道具？

import React from 'react';
import styled from 'styled-components';

const RedBackground = styled.div`
    background-color: red;
`;

interface MenuContainerProps {
    focus?: boolean;
}

class MenuContainer extends React.Component<MenuContainerProps> {
    static defaultProps = {
        focus: true,
    };

    render() {
        return (
            <div>MenuContainer</div>
        );
    }
}

const RedMenuContainer = RedBackground.withComponent(MenuContainer);
//                                       error here  ^^^^^^^^^^^^^

/*
    Usage of RedMenuContainer. It should have a red `background-color` and a `focus` prop.

    <RedMenuContainer focus={true}>
        ... children ...
    </RedMenuContainer>
*/

错误信息：

[ts]
Argument of type 'typeof MenuContainer' is not assignable to parameter of type 'ComponentClass<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>'.
  Types of property 'defaultProps' are incompatible.
    Type '{ focus: boolean; }' has no properties in common with type 'Partial<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>'.

Answer 1

不幸的是，这是样式组件TypeScript类型的一个已知问题。 现在的解决方法是强制使用正确的结果类型：

import styled, { StyledComponentClass } from 'styled-components';

// ...

type StyledRedMenuContainer = StyledComponentClass<MenuContainerProps, any, MenuContainerProps>
const RedMenuContainer = RedBackground.withComponent(MenuContainer as any) as StyledRedMenuContainer;

已经有一些工作来解决打字稿类型withComponent ，但我相信它可能停止为样式化的组件4.0被外部提取到DefinitelyTyped的打字稿类型。

附带说明一下，在这种情况下，您的MenuContainer将需要接受一个className MenuContainer并将其传递给它的子MenuContainer <div> ，以便它能够真正使用红色样式。