如何使用样式组件扩展（MUI）React 组件的 TS 接口？

Question

我一直在试图弄清楚如何解决这个过载问题，但到目前为止还没有骰子。我正在使用 Typescript、Styled-components 和 material-ui。我正在使用 styled(MUIButton) 构建原生 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

这是因为format 是一个自定义属性，您需要将其作为参数传递给StyleButton 元素。

由于您已经创建了IButton 接口，您可以像这样使用它：

const StyledButton = styled(MUIButton)<IButton>`
   ${props => console.log(props)}
   ...
`;

使用上面的代码，您还需要将界面中的label 设置为可为空（如果不这样做，您将收到错误Property 'label' is missing in type）：

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 label={"test"} format={"primary"} variant={"contained"} />

另一种方法是将您的 Button 设置为 FunctionComponnent，然后，您将不再需要 label 属性，您可以改用 children：

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

const StyledButton = styled(MUIButton)<IButton>`
   ...
`;

const Button: React.FC<IButton> = ({ format, variant, children }) => (
   <StyledButton format={format} variant={variant}>
      {children}
   </StyledButton>
);

<Button format={"secondary"} variant={"text"}>
   Test
</Button>

您可以在 styled-components here 中查看有关自定义道具的更多信息

更新

如果将<StyledButton>中的format替换为color，就会得到想要的按钮样式。

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

const StyledButton = styled(MUIButton)<IButton>`
   ...
`;

const Button: React.FC<IButton> = ({ format, variant, children }) => (
   
   // ******
   // HERE'S THE TRICK -> INSTEAD FORMAT, YOU SHOULD SET COLOR
   // ******
   <StyledButton color={format} variant={variant}>
      {children}
   </StyledButton>
);

<Button variant={"contained"} format={"primary"}>
   primary
</Button>
<Button variant={"outlined"} format={"secondary"}>
   secondary
</Button>

Answer 2

您的StyledButton 组件的外观并不完全清楚。来自@material-ui/core 的原始Button 不接受format 属性。这正是这个错误的原因。

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

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

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