Trying to customize MUI through createTheme, my plans include expanding variants for the Typography component. Added the following custom variants: 'buttonLarge', 'buttonMedium', 'buttonSmall', 'inputLable', 'inputText', 'helperText', 'avatarInitials', 'chip', 'tooltip', 'alertTitle', 'tableHeader', 'badgeLabel', 'toast'. Following recommendations in MUI documentation for Typography component, I extend the types:
import { CSSProperties } from 'react'
import { TypographyVariants } from '@themes/typography/typography.consts'
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> {}
}
Everything is fine, TypeScript now sees them and does not swear, the options are applied correctly, but there is an unpleasant problem. When I try to register an variant, autofill offer only native options, as if there are no custom ones:
It's strange, but if I take a string in curly brackets, then my custom options are there:
Please note that if I manually enter a custom version, TS does not swear in both cases, if I make a mistake, it will highlight the error.
Next, StoryBook does not see user variants, only those that are by default:
I checked in PhpStorm and VSCode, passed the project to a friend - the results are the same.
I go to GitHub to write issue on my problem. Developer showed a video where everything works for him, and what is not in the StoryBook, advised him to write there about the current problem. But as an experiment, I created a new CRA + TS + UI project and checked my settings - no changes:
<Typography variant='ctrl+space=only_default_variants'>
<Typography variant={'ctrl+space=all_variants'}>
That is, it has been proven empirically that the problem is neither in StoryBook nor in Vite.
Dependencies in project:
"dependencies": {
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.10",
"@mui/material": "^5.15.10",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@storybook/addon-essentials": "^7.6.16",
"@storybook/addon-interactions": "^7.6.16",
"@storybook/addon-links": "^7.6.16",
"@storybook/addon-themes": "^7.6.16",
"@storybook/blocks": "^7.6.16",
"@storybook/react": "^7.6.16",
"@storybook/react-vite": "^7.6.16",
"@storybook/test": "^7.6.16",
"@types/react": "^18.2.56",
"@types/react-dom": "^18.2.19",
"@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.21.0",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.56.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.1.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"eslint-plugin-simple-import-sort": "^12.0.0",
"eslint-plugin-storybook": "^0.6.15",
"sass": "^1.71.0",
"storybook": "^7.6.16",
"typescript": "^5.3.3",
"unplugin-fonts": "^1.1.1",
"vite": "^5.1.3"
}
Node 20.10.0
What could be the problem?