在 typescript 中扩展 material-ui 组件

Question

尝试扩展 Material-ui Button 组件以添加新的道具。

目的是添加一个新的道具：fontSize，它有三个选项 - small、medium、large。

<Button variant="outlined" color="primary" fontSize="small">
    button_small
</Button>

并在 css 中使用它来进行所需的更改。

根据typescript theme customisation 的材料 ui 文档，我已经自定义了主题并且效果很好。

唯一的问题是尝试更新 Button 的 prop 类型不起作用。

我得到这个错误是因为没有重载匹配，这很明显，因为材料 ui 按钮组件不知道“fontSize”新道具。

错误 TS2769：没有重载匹配此调用。

重载 1 of 3, '(props: { href: string; } & { children?: ReactNode; 颜色？：颜色 |不明确的;禁用？：布尔值 |不明确的; disableElevation?: 布尔值 |不明确的; disableFocusRipple?: 布尔值 | 不明确的; ... 5 更多 ...;变种？：“文本”| ... 2 更多 ... | 不明确的; } & { ...; } & CommonProps<...> & Pick<...>): 元素', 给出了以下错误。输入'{孩子：字符串；变体： “概述”；颜色：“主要”；字体大小：字符串； }' 不可赋值 键入'IntrinsicAttributes & { href: string; } ＆ { 孩子们？： 反应节点；颜色？：颜色 |不明确的;禁用？：布尔值 |不明确的; disableElevation?: 布尔值 |不明确的; ... 6 更多 ...;变种？： “文字” | ... 2 更多 ... |不明确的; } & { ...; } & CommonProps<...> & 选择<...>'。类型上不存在属性“fontSize” 'IntrinsicAttributes & { href: string; } & { 孩子？：反应节点； 颜色？：颜色 |不明确的;禁用？：布尔值 |不明确的; disableElevation?: 布尔值 |不明确的; ... 6 更多 ...;变种？： “文字” | ... 2 更多 ... |不明确的; } & { ...; } & CommonProps<...> & 选择<...>'。

重载 2 of 3, '(props: { component: ElementType; } & { 孩子？：反应节点；颜色？：颜色 |不明确的;禁用？：布尔值 | 不明确的; disableElevation?: 布尔值 |不明确的; ... 6 更多 ...; 变种？：“文本”| ... 2 更多 ... |不明确的; } & { ...; } & CommonProps<...> & Pick<...>): Element'，出现以下错误。 '{ children: string; 类型中缺少属性 'component'变体： “概述”；颜色：“主要”；字体大小：字符串； }' 但在 类型'{组件：元素类型； }'。

重载 3 of 3, '(props: DefaultComponentProps>>): Element'，给出了以下错误。输入'{孩子： 细绳;变体：“概述”；颜色：“主要”；字体大小：字符串； }' 是 不能分配给类型'IntrinsicAttributes & { children?: ReactNode; 颜色？：颜色 |不明确的;禁用？：布尔值 |不明确的; disableElevation?: 布尔值 |不明确的; ... 6 更多 ...;变种？： “文字” | ... 2 更多 ... |不明确的; } & { ...; } & CommonProps<...> & 选择<...>'。类型上不存在属性“fontSize” 'IntrinsicAttributes & { children?: ReactNode;颜色？：颜色 | 不明确的;禁用？：布尔值 |不明确的; disableElevation?: 布尔值 |不明确的; ... 6 更多 ...;变种？：“文本”| ... 2 更多 ... | 不明确的; } & { ...; } & CommonProps<...> & Pick<...>'。

尝试 1： 根据this stack-overflow question 的回答，我尝试重新声明按钮，但它引发了似乎未解决的打字稿错误（https://github.com/Microsoft/TypeScript/issues/17547）。

declare module '@material-ui/core' {
    export interface MyButtonProps {
        fontSize: 'small' | 'medium' | 'large';
    }
    export class Button extends StyledComponent<ButtonProps & MyProps> {
    }
}

尝试2： 尝试覆盖 ButtonTypeMap 而不是 Button，但这也无济于事。

declare module '@material-ui/core/Button' {
    export type ButtonTypeMap<P = {}, D extends React.ElementType<any> = "button"> = ExtendButtonBaseTypeMap<{
        props: P & {
            children?: React.ReactNode;
            color?: CustomColors;
            disabled?: boolean;
            disableElevation?: boolean;
            disableFocusRipple?: boolean;
            endIcon?: React.ReactNode;
            fullWidth?: boolean;
            href?: string;
            size?: 'small' | 'medium' | 'large';
            startIcon?: React.ReactNode;
            variant?: 'text' | 'contained';
            fontSize: 'small' | 'medium' | 'large';
        };
        defaultComponent: D;
        classKey: ButtonClassKey;
    }>
    // The next line throws error with 'Button' is already declared in the upper scope
    // declare const Button: ExtendButtonBase<ButtonTypeMap>;
}

版本：

打字稿：4.2.4

@material-ui/core：4.11.4

编辑：这里有一些答案 (https://stackoverflow.com/a/65344567/2860486)，它添加了一个自定义 HOC，它扩展了材料 UI 组件以实现所需的行为，但我想覆盖材料 UI 组件本身，以与从“导入组件”保持一致material-ui" 不是来自我本地的自定义组件文件夹。

Answer 1

配合 Mui5 使用

import React, { useState } from 'react';
import { Button as MuiButton, ButtonProps } from '@mui/material';
import { styled } from '@mui/material/styles';

import { ITheme } from '../../mytheme';

export interface IButton extends Omit<ButtonProps, 'size'> {
  size?: 'small' | 'medium' | 'large' | 'huge';
  theme?: ITheme;
}

const Button: React.FC<IButton> = styled(MuiButton, {
  skipSx: true,
  skipVariantsResolver: true,
})<IButton>(({ theme }) => {
  return {//..add your styleoverrides here! or use a theming only approach};
});

主题仅不嵌套MuiComponents跟随https://mui.com/customization/theme-components/#adding-new-component-variants

declare module '@mui/material/Button' {
  interface ButtonPropsVariantOverrides {
   size: 'large' | 'small' | 'likemoon | 'whatsoever';
  }
} 

干杯

Answer 2

您可以简单地使用 ButtonProps 并对其进行扩展并添加您的自定义属性以及扩展所有其余属性。

自定义按钮组件

import {
  Button as MuiButton,
  ButtonProps,
  makeStyles
} from "@material-ui/core";

interface IButtonProps extends ButtonProps {
  fontSize?: "small" | "medium" | "large";
}

const useStyles = makeStyles({
  small: {
    fontSize: "0.7em"
  },
  medium: {
    fontSize: "1.0em"
  },
  large: {
    fontSize: "1.4em"
  }
});

function Button({ fontSize = "medium", children, ...rest }: IButtonProps) {
  const classes = useStyles();
  return (
    <MuiButton classes={{ label: classes[fontSize] }} {...rest}>
      {children}
    </MuiButton>
  );
}

export default Button;

您将拥有 MUI Button 的每个道具以及您的自定义道具（如 fontSize）自动完成：

<div className="buttons">
  <Button
    fontSize="small"
    variant="contained"
    onClick={() => console.log("small button")}
  >
    Small
  </Button>
  <Button
    fontSize="medium"
    variant="contained"
    onClick={() => console.log("medium button")}
  >
    Medium
  </Button>
  <Button
    fontSize="large"
    variant="contained"
    onClick={() => console.log("large button")}
  >
    Large
  </Button>
</div>

结果

您可以在CodeSandBox React TS Demo App 尝试完整代码完成的工作示例。

PS：如果您使用 ESLint，请不要忘记通过禁用规则 react/jsx-props-no-spreading 来允许 JSX Props Spreading。

/* eslint-disable react/jsx-props-no-spreading */