javascript - Material UI v5 - TypeScript'te Typography varyantını genişletmek "Bu çağrıya uyan bir aşırı yükleme yok" hatası oluşturuyor

Material UI v5 ve TypeScript ile bir uygulamanın temelini oluşturuyorum. Mevcut varsayılan özelliklere eklenen bazı özel özelliklerle Material UI temasını genişletmek istiyorum.

Benim theme.ts yapılandırmam şöyle görünüyor:

import { createTheme, ThemeOptions } from "@mui/material/styles";

interface IThemeOptions extends ThemeOptions {}

export const themeStyles = {
    palette: {...},
    breakpoints: {...},
    typography: {
        h1: {...},
        h2: {...},
        h3: {...},
        h4: {...},
        h5: {...}
        h6: {...},
        button: {...},
        body1: {...},
        body2: {...},
        //this is the custom prop I want to add
        h1Bold: {
            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
            fontWeight: 700,
            fontSize: "3.3125rem",
            lineHeight: "1.15em",
            color: "#1D1D1D",
            marginTop: "20px",
            marginBottom: "10px",
        },
    },
};

const theme = createTheme(themeStyles as IThemeOptions);

export default theme;

App.tsx içinde "h1Bold" özelliğini şöyle çağırıyorum:

import React from "react";

// Mui
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";

interface IProps {}

const App: React.FC = (): JSX.Element => {
    return (
        <Box
            className="App"
            component="div"
            sx={{
                backgroundColor: "white",
            }}
        >
            <Typography variant="h1Bold">
                I am the App
            </Typography>
        </Box>
    );
};

export default App;

Bu bana Hata veriyor:

    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 '"h1Bold"' is not assignable to type '"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | undefined'.
  Overload 2 of 2, '(props: DefaultComponentProps<TypographyTypeMap<{}, "span">>): Element', gave the following error.
    Type '"h1Bold"' is not assignable to type '"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | undefined'."

Yani, bu hatayı anlıyorum, tanımı bir şekilde güncellemem gerekiyor. TypeScript’in yeni eklenen "h1Bold" özelliğini anlaması için bunu nasıl yapabilirim?

Benim index.ts dosyam şöyle görünüyor:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import store from "./redux/store";
import { persistStore } from "redux-persist";
import { PersistGate } from "redux-persist/integration/react";
import { ThemeProvider } from "@mui/material/styles";
//this is the theme created with createTheme()
import theme from "./config/theme/theme";

import App from "./App";
import "./index.css";

// Redux-Persist
let persistor = persistStore(store);

ReactDOM.render(
    <React.StrictMode>
        <ThemeProvider theme={theme}>
            <Provider store={store}>
                <PersistGate loading={null} persistor={persistor}>
                    <BrowserRouter>
                        <App />
                    </BrowserRouter>
                </PersistGate>
            </Provider>
        </ThemeProvider>
    </React.StrictMode>,
    document.getElementById("root")
);

Birinin bana biraz fikir vermesi veya TypeScript kullanırken Material UI temasını daha kolay genişletip okumak için bir çözümü varsa harika olurdu.

Cevap #1

MUI v5'te, MUI belgelerine göre TypeScript'te bildirmeniz gereken birkaç ekstra özellik vardır.

declare module "@mui/material/styles" {
  interface TypographyVariants {
    h1Bold: React.CSSProperties;
  }

  // allow configuration using `createTheme`
  interface TypographyVariantsOptions {
    h1Bold?: React.CSSProperties;
  }
}

// Update the Typography's variant prop options
declare module "@mui/material/Typography" {
  interface TypographyPropsVariantOverrides {
    h1Bold: true;
  }
}

Bu bileşenin aslında bir h1 (veya başka herhangi bir bileşen) ile eşlendiğini yapmak için, tema bileşen nesnesindeki varyant eşlemesini kullanabilirsiniz:

const theme: Theme = createTheme({
  typography: {
    h1Bold: {
      fontWeight: 'bold',
    },
  },
  components: {
    MuiTypography: {
      defaultProps: {
        variantMapping: {
          h1Bold: "h1",
        }
      },
    }
  }
});

Cevap #2

Typescript'te Typography varyantını güncellemek için aşağıdaki kodu kullanın:

declare module '@mui/material/Typography' {
  interface TypographyPropsVariantOverrides {
    h1Bold: true;
  }
}

Yukarıdaki arayüzün özellikleri daha sonra mevcut varyantlarla birleştirilir. Şimdi Typography öğesinin variantı şudur:

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

Artık Typescript tarafından şikayet edilmeksizin yeni varyantı kullanabilirsiniz:

<Typography variant='h1Bold'

Canlı Demo