Reactjs 将样式化材质UI组件的类型设置为与原始组件相同

当我尝试定义自定义样式的组件时，样式化组件的类型将更改为通用类型的组件，而不是已设置样式的组件的类型

在下面的例子中

• 按钮

  由物料UI定义实现

  扩展按钮库

• StyledButton

  实现

  React.ComponentType

这会导致问题，因为元素按钮的原始API不能再使用了（例如

组件

属性）

示例，（此处为codesandbox）从物料界面上的文档复制：

从'@materialui/core/styles'导入{withStyles}；
从“@material ui/core/Button”导入按钮；
从“react”导入{Fragment}；
从'react router dom'导入{NavLink}；
//'withStyles（）`高阶组件正在注入'classes'`
//“按钮”组件使用的道具。
const StyledButton=带有样式({
根目录：{
背景：“线性梯度（45度，Fe6B30%，FF8E53 90%），
边界半径：3，
边界：0，
颜色：'白色'，
身高：48，
填充：“0 30px”，
boxShadow:'0 3px 5px 2px rgba（255、105、135、3）'，
},
标签：{
textTransform:'大写'，
},
})（按钮）；
导出常量RenderComponent=（）=>(
{/*正常工作*/}
{/*引发错误，没有重载与此调用匹配*/}
);

import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import { Fragment } from 'react';
import { NavLink } from 'react-router-dom';

// The `withStyles()` higher-order component is injecting a `classes`
// prop that is used by the `Button` component.
const StyledButton = withStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    borderRadius: 3,
    border: 0,
    color: 'white',
    height: 48,
    padding: '0 30px',
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
  },
  label: {
    textTransform: 'capitalize',
  },
})(Button);

export const RenderComponent = () => (
  <Fragment>
    <Button component={ NavLink } to="/app/page" /> { /* Works as expected */ }
    <StyledButton component={ NavLink } to="/app/page" /> { /* Throws an error, no overload matches this call */ }
  </Fragment>
);