[material-ui] Customizing the Typography with custom options and types about material-ui HOT 12 CLOSED

@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.

from material-ui.

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.

from material-ui.

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.

from material-ui.

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?

from material-ui.

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

from material-ui.

@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:

from material-ui.

@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

from material-ui.

@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.

from material-ui.

@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?

from material-ui.

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.

from material-ui.

@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

from material-ui.

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>

from material-ui.