score:6

Accepted answer

To extend Typography variants you can do so:

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>
  );
}

For more details please refer to MUI documentation.

In your codesandbox I can see also an attempt to use extended variants for a Button; sorry but I can't help on that.


Related Query

More Query from same tag