Why doesn't MUI provide hints for user settings?

66 views Asked by At

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:

Screen 1

It's strange, but if I take a string in curly brackets, then my custom options are there:

Screen 2

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:

Screen 3

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"
  }

GitHub Repository Project

Node 20.10.0

What could be the problem?

0

There are 0 answers