如何使用样式化组件为(MUI)Reaction组件扩展TS接口？ [英] How to extend TS interface for (MUI) React Component using styled-components?

问题描述

我一直在试图找出如何解决这个过载问题，但到目前为止还没有结果。我使用的是TypeScrip、Style-Components和Material-UI。我使用styled(MUIButton)在本机MUIButton的基础上构建。通过console.log，我可以看到我的道具进入了组件，但是我不知道如何设置键入，所以重载错误就消失了。

有什么想法吗？

相关文章：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)};
  }
  `}
...
}

推荐答案

这是因为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>

您可以在样式组件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>

这篇关于如何使用样式化组件为(MUI)Reaction组件扩展TS接口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！