Comments (13)
@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.jsonI'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.
@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:
issue-40939-typography-variant.mp4
from material-ui.
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
2024-02-18_14h24_14.webm
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.
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.
from material-ui.
Related Issues (20)
- [material-ui] Not able to build the project when updating to Next.js 14.2.2 with v5.15.15 HOT 5
- [code-infra] Replace all references of event as e HOT 6
- [material-ui][theme] Array syntax doesn't work for values in styleOverrides in theme HOT 4
- MRT Infinite Scrolling with RTK Query HOT 1
- [docs-infra] Show plan on API pages
- [docs] need for a blog about how to optimize MUI
- [material-ui][Grid] Make the v2 component version stable
- [docs-infra] Using the right to left feature with browser translators HOT 5
- [joy-ui][Select] Floating label Select HOT 4
- [material-ui][AlertTitle] Missing Typography props when using AlertTitle
- [joy-ui][Radio] Can't use a checked icon/unchecked icon when setting a background color HOT 1
- [docs][material-ui] Slider in color customization playground twitches when sliding HOT 4
- [material-ui][TableRow] Exported variable 'StyledTableRow' has or is using name 'UNDEFINED_VOID_ONLY' HOT 2
- [material-ui] Button and few more components CSS styling are off when use with Bootstrap 5.3.3 HOT 1
- [system] Unnecessary media query with 0px breakpoints HOT 3
- [material-ui] How to reduce bundle size? HOT 3
- [@mui/styles] React 17 dependency HOT 1
- [code-infra] Migration to ESLint v9
- Compatibility with React 19 types HOT 1
- [docs] Introduce User Persona for Enhanced Portuguese/Brazilian Documentation HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-ui.