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

Question

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

错误

\n

\n

TS2769: No overload matches this call. \xc2\xa0\xc2\xa0Overload 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. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type \'{ "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>; }\'. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Types of property \'component\' are incompatible. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type \'string | undefined\' is not assignable to type \'ElementType<any>\'. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type \'undefined\' is not assignable to type \'ElementType<any>\'. \xc2\xa0\xc2\xa0Overload 2 of 2, \'(props: DefaultComponentProps<TypographyTypeMap<{}, "span">>): Element\', gave the following error. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type \'{ "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; }\'. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Types of property \'variant\' are incompatible. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type \'"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\'.\n

\n

扩展失败的代码

\n

import React from "react";\nimport { Typography as MUITypography, TypographyProps } from "@mui/material";\nimport { OverridableStringUnion } from "@mui/types";\nimport { Variant } from "@mui/material/styles/createTypography";\nimport { TypographyPropsVariantOverrides } from "@mui/material/Typography/Typography";\n\ninterface IText extends TypographyProps {\n  component?: string;\n  variant?: OverridableStringUnion<\n    Variant | "inherit" | "caption12r" | "caption12ruc" | "caption12buc",\n    TypographyPropsVariantOverrides\n  >;\n}\n

\n

我还尝试通过 tsModules 扩展它：

\n

export interface EleMuiVariantOverrides {\n  \'icon\': true;\n}\n\ndeclare module "@mui/material/Button/Button" {\n  interface ButtonPropsVariantOverrides extends EleMuiVariantOverrides {}\n}\n

\n

Answer 1

要扩展Typography variants 你可以这样做：

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 文档。

在您的codesandbox中，我还可以看到尝试使用扩展variants 来表示 Button; 抱歉，但我无能为力。