如何在TypeScript中正确使用styled-components的withComponent()方法？

你遇到的这个报错，核心原因是类型不兼容：RedBackground是基于div创建的样式组件，它的props类型是HTML div元素的属性集合；而你的MenuContainer用的是自定义的MenuContainerProps，两者的props（包括defaultProps）完全不匹配，所以TypeScript编译器直接抛出了错误。

下面给你两种可行的解决方案，其中第二种是更推荐的现代用法：

方法一：让自定义组件兼容样式组件的props类型 #

我们可以让MenuContainerProps继承原样式组件的props类型，这样两者的属性集合就对齐了，TypeScript就不会再报错。

修改后的完整代码：

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

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

// 继承RedBackground的props类型，同时添加自定义的focus属性
interface MenuContainerProps extends React.ComponentProps<typeof RedBackground> {
 focus?: boolean;
}

class MenuContainer extends React.Component<MenuContainerProps> {
 static defaultProps = {
 focus: true,
 // 如果需要的话，也可以补充div相关的默认props，比如className等
 };
 render() {
 return (
 <div>MenuContainer</div>
 );
 }
}

// 现在类型完全匹配，不会报错了
const RedMenuContainer = RedBackground.withComponent(MenuContainer);

// 使用示例：同时支持focus属性和div的原生props
<RedMenuContainer focus={true} className="custom-class">
 这里是菜单内容
</RedMenuContainer>

方法二：使用as属性替代withComponent（推荐） #

其实styled-components从v4版本开始就推荐用as属性来替代withComponent，因为withComponent在类型处理上容易出现这类不兼容问题，而as的用法更灵活，类型推导也更准确。

你可以有两种方式使用as：

方式A：直接基于自定义组件创建样式组件 #

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

interface MenuContainerProps {
 focus?: boolean;
}

class MenuContainer extends React.Component<MenuContainerProps> {
 static defaultProps = {
 focus: true,
 };
 render() {
 return (
 <div>MenuContainer</div>
 );
 }
}

// 直接基于MenuContainer创建样式组件，自动继承它的props类型
const RedMenuContainer = styled(MenuContainer)`
 background-color: red;
`;

// 使用示例：完美支持focus属性
<RedMenuContainer focus={false}>
 这里是菜单内容
</RedMenuContainer>

方式B：在使用基础样式组件时指定as #

// 复用你原来的RedBackground和MenuContainer
// 使用时直接通过as指定要渲染的组件
<RedBackground as={MenuContainer} focus={true}>
 这里是菜单内容
</RedBackground>

这种方式不需要额外创建新的组件，适合临时替换渲染类型的场景。

总结一下：如果一定要坚持用withComponent，就需要让自定义组件的props兼容原样式组件的类型；但更推荐用as属性或者直接基于自定义组件创建样式组件，这样能避免大部分类型匹配问题，代码也更清晰。

内容的提问来源于stack exchange，提问作者Ivan 膶enté拧