Question

我对打字稿很陌生，但是我想要实现的是自己对材料UI Button进行样式设置，并为其添加一些自定义道具。

我的按钮组件：

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;

它现在正在工作，但我想知道如何正确扩展MUIButtonProps的props-添加可选的isCircled props并避免使用ref: any？

现在，当我从defaultProps中删除例如ref时，我得到了错误Property 'ref' is missing in type ( children: string ...

打字稿MaterialUi和样式组件问题

0 个答案: