Почему MUI не включает подсказки для пользовательских настроек?

Как настроить автоподсказки, чтобы они отображали пользовательские варианты для компонента Typography после расширения через <b>createTheme</b>?
  • 19 февраля 2024 г. 14:08
Ответы на вопрос 2
MUI не включает подсказки для пользовательских настроек, потому что они не могут заранее знать, какие именно пользовательские настройки будут добавлены. Они предоставляют документацию и примеры использования для каждого компонента, чтобы разработчики сами могли определить, какие пользовательские настройки им необходимы.

Чтобы настроить автоподсказки для пользоватских вариантов компонента Typography после расширения через createTheme, вы можете использовать TypeScript и JSDoc для добавления подсказок. Вот пример:

```typescript
import { createTheme } from '@mui/system';

/**
 * @typedef {import('@mui/system').SxProps} SxProps
 */

declare module '@mui/system' {
  interface Theme {
    typographyVariants: {
      h1: SxProps;
      h2: SxProps;
      // Добавьте здесь пользовательские варианты
    }
  }
}

const theme = createTheme({
  typographyVariants: {
    h1: {
      fontSize: 32,
      fontFamily: 'Arial',
    },
    h2: {
      fontSize: 24,
      fontFamily: 'Helvetica',
    },
    // Добавьте здесь пользовательские варианты
  }
});

// Теперь вы можете получить автоподсказки для пользоватских вариантов компонента Typography, когда используете переменную theme
``` 

С помощью такого подхода вы сможете добавить автоподсказки для пользовательских вариантов компонента Typography и улучшить опыт работы с MUI.
Спасибо WbICHA , по проблеме где нет автозаполнения пользовательских вариантов в стоке, проблема в пути декларирования. 

Нужно это:
declare module '@mui/material/Typography/Typography' {
  interface TypographyPropsVariantOverrides extends Record<CustomVariants, true> {}
}


Вместо этого:
declare module '@mui/material/Typography' {
  interface TypographyPropsVariantOverrides extends Record<CustomVariants, true> {}
}


В StoryBook не видит расширенных типов, так как и не смотрит в d.ts. Помогло в конфиге .storybook/main.ts:

// ...
reactDocgenTypescriptOptions: {
      include: [
        '**/**.tsx',
        'src/themes/typography/typography.types.d.ts',
      ],
      tsconfigPath: '../tsconfig.json',
// ...
Похожие вопросы