Reactjs 类型脚本材质和样式化组件问题

我对typescript很陌生，但我想实现的是自己设计材质UI按钮的样式，并为其添加一些自定义道具

我的按钮组件：

import React from 'react';
import { ButtonProps as MUIButtonProps } from '@material-ui/core';
import styled from 'styled-components';
import { Button as MuiButton } from '@material-ui/core';
import Link from 'next/link';


interface ButtonProps extends MUIButtonProps {
  children: React.ReactNode,
  isCircled?: boolean,
  ref: any,
}

const DefaultButton = styled(React.forwardRef((props: ButtonProps, ref) => {
  const {
    isCircled,
    ...other
  } = props;

  return (
    <MuiButton ref={ref} {...other} />
  )
}))`
  height: 48px;
  border-radius: ${(props: any) => props.isCircled ? '25px' : '10px'};
`;


const Button = (props: ButtonProps) => {
  const {
    children,
    isCircled,
    href,
    ...rest
  } = props;

  return (
    <>
      {href ? (
        <Link href={href}>
          <DefaultButton isCircled={isCircled} {...rest}>{children}</DefaultButton>
        </Link>
      ) : (
        <DefaultButton isCircled={isCircled} {...rest}>{children}</DefaultButton>
      )}
    </>
  )
}

Button.defaultProps  = {
  isCircled: true,
  color: "secondary",
  variant: "contained",
  ref: "",
};


export default Button;

从“React”导入React；
从'@material ui/core'导入{buttonops as muibuttonops}；
从“样式化组件”导入样式化；
从'@material ui/core'导入{Button as MuiButton}；
从“下一个/链接”导入链接；
接口按钮操作扩展了多个按钮{
子项：React.React节点，
isCircled？：布尔值，
参考：任何，
}
const DefaultButton=styled（React.forwardRef（（props:ButtonProps，ref）=>{
常数{
如果是圆形的，
……其他
}=道具；
返回(
)
}))`
高度：48px；
边界半径：${（props:any）=>props.isCircled？'25px'：'10px'}；
`;
常量按钮=（道具：按钮按钮）=>{
常数{
儿童
如果是圆形的，
href，
休息
}=道具；
返回(
{href(
{儿童}
) : (
{儿童}
)}
)
}
Button.defaultProps={
是的，
颜色：“次要”，
变式：“包含”，
参考号：“，
};
导出默认按钮；

它现在正在工作，但我想知道如何正确地扩展

muibutontops

的道具-添加可选

isCircled

道具并避免使用

ref:any

---

现在，当我从defaultProps中删除例如ref时，我得到了一个错误

属性'ref'在类型中丢失（子项：string…

Kwiaton您能显示整个错误消息吗？谢谢您可能得到了“ref”错误，因为您正在将此组件与属性ref集一起使用。您必须删除ref属性。