reactjs - 如何使用样式组件扩展(MUI)React 组件的 TS 接口(interface)？

Question

我一直在试图找出如何解决这个过载问题，但到目前为止还没有任何结果。我正在使用 Typescript、Styled-components 和 Material-ui。我正在使用 styled(MUIButton) 来构建 native MUI Button。通过 console.logs，我可以看到我的 props 传递到组件中，但是我不知道如何设置类型以使过载错误消失。

有什么想法吗？

相关文章:How to extend props for Material-UI components using Typescript?

错误:

代码:

import { default as MUIButton, ButtonProps } from '@material-ui/core/Button';
import styled, { css } from 'styled-components';
import { darken } from '@material-ui/core/styles';

interface IButton extends ButtonProps {
  format?: 'primary' | 'secondary';
  variant?: 'contained' | 'outlined' | 'text';
  label: string;
}

const Button = ({ format, variant, label }: IButton): JSX.Element => (
  <StyledButton format={format} variant={variant}>
    {label}
  </StyledButton>
);

Button.defaultProps = {
  format: 'primary',
  variant: 'contained',
};

export default Button;

const StyledButton = styled(MUIButton)<IButton>`
  //? contained variant (default)
  ${({ format, theme }) => `
  background-color: ${
    format === 'primary'
      ? theme.palette.colors.main
      : theme.palette.colors.secondary
  };
  color: ${theme.palette.font.secondary};
  font-weight: ${theme.agnosticStyles.font.weight.bold};
  padding: .7rem 4rem;
  &:hover {
    background-color: ${darken(theme.palette.colors.main, 0.2)};
  }
  `}
...
}

Answer 1

尚不完全清楚您的 StyledButton 组件是什么样子。原创Button来自 @material-ui/core 不接受 format 属性。这正是这个错误的原因。

如果您以某种方式在 StyledButton 中使用此属性，您应该相应地键入它:

const StyledButton = styled(MUIButton)<{format?: 'primary' | 'secondary'}>``;

尽管您可能正在寻找原始 Button 接受的 color 属性，并且可能同时接受 primary 和 secondary 值。