New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[material-ui] Customizing the Typography with custom options and types #40939
Comments
@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. |
Please make sure that the 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
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
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:
This happens in PHPStorm or VSCode. |
@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? |
@ZeeshanTamboli - Welcome to Repository, thanks! Problem is urgent, I can't solve it |
@GabbereX There isn't a Also, typography can retrieve the variants in your reproduction: issue-40939-typography-variant.mp4 |
@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. |
@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? |
@GabbereX No, custom options aren't displayed, only the native ones are. I suspect this might be a Storybook issue because:
export const Typography: Story = {
args: {
variant: 'body1',
children: 'Example Text',
},
}; Your Storybook configuration in |
@ZeeshanTamboli if the problem only concerned StoryBook, then there would not be the following behavior
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 |
Installed clean based CRA project + TS + MUI (@mui/material, @emotion/styled, @emotion/react). The result is the same
|
Instead of
specify another path:
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. |
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:
my code in createTypography.d.ts
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
The text was updated successfully, but these errors were encountered: