[material-ui] Customizing the Typography with custom options and types

[GabbereX]

Related page

https://mui.com/material-ui/customization/typography/

Kind of issue

Missing information

Issue description

Added my custom variants to Typography component following documentation

in documentation:

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

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

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

my code in createTypography.d.ts

import { CSSProperties } from 'react'

import { TypographyVariants } from '@consts/themes/typography'

export const TypographyVariants = [
  'h1',
  'h2',
  'h3',
  'h4',
  'h5',
  'h6',
  'subtitle1',
  'subtitle2',
  'body1',
  'body2',
  'caption',
  'overline',
  'buttonLarge',
  'buttonMedium',
  'buttonSmall',
  'inputLable',
  'inputText',
  'helperText',
  'avatarInitials',
  'chip',
  'tooltip',
  'alertTitle',
  'tableHeader',
  'badgeLabel',
  'toast'
] as const

export type CustomVariants = typeof TypographyVariants[number]

declare module '@mui/material/styles' {
  interface TypographyVariants extends Record<CustomVariants, CSSProperties> {}
  interface TypographyVariantsOptions extends Partial<Record<CustomVariants, CSSProperties>> {}
}

declare module '@mui/material/Typography' {
  interface TypographyPropsVariantOverrides extends Record<CustomVariants, true> {}
}

The problem arises in storybook there are no my added options the component suggests only native options, but if I enter my own, then TS does not swear

<Typography variant='my_custom_variant'> Typography </Typography>

If I'm looking for my options in the object, then they are there

<Typography variant={'my_custom_variant'}> Typography </Typography>

Context

It seems to me that something is missing in the types in order for them to be displayed in the StoryBook and in the prop where just a line offered my custom options. I've tried everything I can. Maybe this is a bug, or maybe I made a mistake somewhere

Search keywords: typography, customize, custom, types, typescript

[ZeeshanTamboli]

@GabbereX We can't help you just with the code snippets. We need a reproduction. Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve.

[siriwatknp]

Please make sure that the createTypography.d.ts file is included in your tsconfig.json

I'm closing this. Happy to help if you provide a repo that I can take a look.

[GabbereX]

Please make sure that the createTypography.d.ts file is included in your tsconfig.json

I'm closing this. Happy to help if you provide a repo that I can take a look.

Project repository or Project archive in cloud

In tsconfig.json is available

"include": ["src"],

src -> themes -> typography -> typography.types.d.ts

Run storybook, go to "Data Display" -> "Typography": variant prop doesn't have my added options ('buttonLarge', 'buttonMedium', 'buttonSmall', 'inputLable', 'inputText', 'helperText', 'avatarInitials', 'chip', 'tooltip', 'alertTitle', 'tableHeader', 'badgeLabel', 'toast')

Go to main.tsx

<Typography variant=''>
     Typography
</Typography>

Try to call up the suggested options and there will be only those that are by default, my custom ones are not.

But if I circle the option string into an object and ctrl + space = all options, including my custom ones:

<Typography variant={''}>
     Typography
</Typography>

This happens in PHPStorm or VSCode. That is, I want to say that the types work, but not fully.

[ZeeshanTamboli]

Project repository or Project archive in cloud

@GabbereX, I can't download your code from the project repository or access it via cloud. Could you please upload the project to GitHub instead?

[GabbereX]

@ZeeshanTamboli - Welcome to Repository, thanks! Problem is urgent, I can't solve it

[ZeeshanTamboli]

@ZeeshanTamboli - Welcome to Repository, thanks! Problem is urgent, I can't solve it

@GabbereX There isn't a createTypography.d.ts file as mentioned in the description.

Also, typography can retrieve the variants in your reproduction:

https://github.com/mui/material-ui/assets/20900032/6860cc86-6542-4061-87d5-0671692e1085

[GabbereX]

@ZeeshanTamboli

createTypography.d.ts

Moved to src -> themes -> typography -> typography.types.d.ts I don't have my custom options. In addition, I suggest running storybook in the component "Data Display" -> "Typography" has no custom options My colleague also doesn't have any custom options. That is, as in your video, we do not have user options and I cannot understand why this is happening

Demo Video

[ZeeshanTamboli]

@GabbereX It seems like it might be related to your code editor. What code editor are you using? I'm using Microsoft Visual Studio Code. I recommend checking your TypeScript-related settings in the editor. Also, you might want to seek help on Stack Overflow instead. I don't think this issue is related to MUI.

[GabbereX]

@ZeeshanTamboli One could assume so, but the same situation is in both PHPStorm and VSCode of my college. The situation is the same. The problem is not in the editor, this is clearly indicated by StoryBook, which also does not see my user options. Have you displayed custom options with StoryBook?

[ZeeshanTamboli]

Have you displayed custom options with StoryBook?

@GabbereX No, custom options aren't displayed, only the native ones are.

I suspect this might be a Storybook issue because:

• The autosuggestion works as shown in the video here.
• The autosuggestion also works in the file Typography.stories.ts for the custom variant at:

export const Typography: Story = {
  args: {
    variant: 'body1',
    children: 'Example Text',
  },
};

Your Storybook configuration in .storybook/main.ts also seems correct. I'm unable to find a solution, but we can confirm that it's not an issue with Material UI Typography. Could you file a bug report at the Storybook repository? I am closing this issue.

[GabbereX]

@ZeeshanTamboli if the problem only concerned StoryBook, then there would not be the following behavior

Go to main.tsx

<Typography variant=''>
     Typography
</Typography>

Try to call up the suggested options and there will be only those that are by default, my custom ones are not.

But if I circle the option string into an object and ctrl + space = all options, including my custom ones:

<Typography variant={''}>
     Typography
</Typography>

I have redefined the interface in typography.types.d.ts and it should work, but it does not work fully both in StoryBook and in the project. I demonstrated on video what the problem is, StoryBook has nothing to do with it, I deleted it and the situation was the same: variant='' - no ok, variant={''} - ok

[GabbereX]

Installed clean based CRA project + TS + MUI (@mui/material, @emotion/styled, @emotion/react). The result is the same

<Typography variant=''>
     Typography
</Typography>

Try to call up the suggested options and there will be only those that are by default, my custom ones are not.

But if I circle the option string into an object and ctrl + space = all options, including my custom ones:

<Typography variant={''}>
     Typography
</Typography>

[GabbereX]

Instead of

declare module '@mui/material/Typography' {
  interface TypographyPropsVariantOverrides extends Record<CustomVariants, true> {}
}

specify another path:

declare module '@mui/material/Typography/Typography' {
  interface TypographyPropsVariantOverrides extends Record<CustomVariants, true> {}
}

This helped solve the first part of the problem where hints did not work in the project if called in a line without an outline in the object. For StoryBook, this did not solve the problem and now it's time to deal with it.