如何在 React with Typescript 中使用 Material UI 自定义变体

Question

错误示例：https://codesandbox.io/s/flamboyant-lederberg-w16pio?file=/src/App.tsx

我正在尝试扩展 Mui 的类型以添加更多变体。我已经从 Muis 基础道具扩展。 interface IText extends TypographyProps {

我正在避免必须管理 Mui 已经定义的所有类型。在这种情况下，它在这里：

"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline"

理论上，道具的最终结果是：

 "inherit" | "caption12r" | "caption12ruc" | "caption12buc" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline"

错误

TS2769: No overload matches this call.   Overload 1 of 2, '(props: { component: ElementType<any>; } & SystemProps<Theme> & { align?: "right" | "left" | "inherit" | "center" | "justify" | undefined; children?: ReactNode; ... 6 more ...; variantMapping?: Partial<...> | undefined; } & CommonProps & Omit<...>): Element', gave the following error.     Type '{ "data-name": string; component?: string | undefined; variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline" | ... 4 more ... | undefined; ... 352 more ...; onTransitionEndCapture?: TransitionEventHandler<...> | undefined; }' is not assignable to type '{ component: ElementType<any>; }'.       Types of property 'component' are incompatible.         Type 'string | undefined' is not assignable to type 'ElementType<any>'.           Type 'undefined' is not assignable to type 'ElementType<any>'.   Overload 2 of 2, '(props: DefaultComponentProps<TypographyTypeMap<{}, "span">>): Element', gave the following error.     Type '{ "data-name": string; component?: string | undefined; variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline" | ... 4 more ... | undefined; ... 352 more ...; onTransitionEndCapture?: TransitionEventHandler<...> | undefined; }' is not assignable to type '{ align?: "right" | "left" | "inherit" | "center" | "justify" | undefined; children?: ReactNode; classes?: Partial<TypographyClasses> | undefined; ... 5 more ...; variantMapping?: Partial<...> | undefined; }'.       Types of property 'variant' are incompatible.         Type '"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline" | "inherit" | "caption12r" | "caption12ruc" | "caption12buc" | undefined' is not assignable to type '"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline" | "inherit" | undefined'.

扩展失败的代码

import React from "react";
import { Typography as MUITypography, TypographyProps } from "@mui/material";
import { OverridableStringUnion } from "@mui/types";
import { Variant } from "@mui/material/styles/createTypography";
import { TypographyPropsVariantOverrides } from "@mui/material/Typography/Typography";

interface IText extends TypographyProps {
  component?: string;
  variant?: OverridableStringUnion<
    Variant | "inherit" | "caption12r" | "caption12ruc" | "caption12buc",
    TypographyPropsVariantOverrides
  >;
}

我还尝试通过 tsModules 扩展它：

export interface EleMuiVariantOverrides {
  'icon': true;
}

declare module "@mui/material/Button/Button" {
  interface ButtonPropsVariantOverrides extends EleMuiVariantOverrides {}
}

Answer 1

要扩展 Typography variant，您可以这样做：

import React from "react";
import {
  Typography,
  TypographyProps,
  createTheme,
  ThemeOptions,
  ThemeProvider
} from "@mui/material";
import { TypographyOptions } from "@mui/material/styles/createTypography";

declare module "@mui/material/Typography" {
  interface TypographyPropsVariantOverrides {
    caption12r: true;
  }
}

interface ExtendedTypographyOptions extends TypographyOptions {
  caption12r: React.CSSProperties;
}

const theme = createTheme({
  typography: {
    caption12r: {
      color: "red"
    }
  } as ExtendedTypographyOptions
} as ThemeOptions);

const Text = (props: TypographyProps) => {
  return <Typography {...props} data-name="CLText" />;
};

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <Text variant="caption12r">Jamie</Text>
      </div>
    </ThemeProvider>
  );
}

详情请参考MUI documentation。

在您的 codesandbox 中，我还可以看到尝试将扩展 variants 用于 Button；抱歉，我无能为力。

如何在 React with Typescript 中使用 Material UI 自定义变体

How to use Material UI custom variants in React with Typescript

javascript

typescript

reactjs

material-ui

错误

扩展失败的代码