错误示例:https://codesandbox.io/s/flamboyant-lederberg-w16pio?file=/src/App.tsx
我正在尝试从 Mui 的类型扩展以添加更多变体。我已经从 Muis 基础 Prop 扩展了。 interface IText extends TypographyProps {
我在避免必须管理 Mui 已经定义的所有类型之后。在这种确切的情况下,它在这里:
"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline"
理论上, Prop 的最终结果是: "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 {}
}
最佳答案
延长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 .在您的代码框中,我还可以看到尝试使用扩展
variant
s 代表 Button
;抱歉,我对此无能为力。
关于javascript - 如何在 React with Typescript 中使用 Material UI 自定义变体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71797203/