[注意] 如何在 MUI v5 中将自己的变体添加到 Typography

介绍

当我查找如何在 MUI v5 中为 Typography 添加一个独特的变体时，我在 google 上找到了有关 v4 的信息，所以我记下了它。

MUI官方网站方法是写进去的，但是对于那些想快速了解的人（=我自己）。

如何添加

（例子）标签如果您添加一个名为 .

主题.ts

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

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

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

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

const theme = createTheme({
  typography: {
    label: {
      color: "#C03030",
      fontSize: 24,
      fontWeight: "bold",
    },
  },
});

export default theme;

，那么你可以像这样使用它：

应用程序.tsx

import React from "react";
import { Typography } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";
import theme from "../src/theme";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Typography variant="label">
        ラベル
      </Typography>
    </ThemeProvider>
  );
};

export default App;

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308631969.html