我对打字稿很陌生,但是我想要实现的是自己对材料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 ...