Блог

У меня проблема с настройкой темы в Material UI 5.0 с использованием машинописного текста.

тема.ts

     import { createTheme } from '@mui/material';

declare module '@mui/material/styles' {
    interface Theme {
        custom: {
            buttonWidth: string;
        };
    }
    interface ThemeOptions {
        custom: {
            buttonWidth: string;
        };
    }
}

export const theme = createTheme({
    palette: {
        primary: {
            main: '#00F',
        },
    },
    typography: {
        body1: {
            fontFamily: 'Comic Sans',
        },
    },
    custom: {
        buttonWidth: '200px',
    },
});

export const CustomTheme= typeof theme;
 

Но когда я пытаюсь его использовать, он не работает

 // CustomTheme imported
<Button sx={{ width: (theme: CustomTheme) => theme.custom.buttonWidth}} />
 

Это показано как любое, или у меня есть эта ошибка машинописи:

Вы имели в виду «тип пользовательской темы»?

Мой вопрос в том, как правильно реализовать пользовательскую тему с помощью Material UI 5.0 и typescript

пакет.json

     // other dependencies
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@mui/icons-material": "^5.0.0",
    "@mui/material": "^5.0.0",
 

В материале v5 вы можете переопределить стиль по умолчанию с помощью styleOverrides

 const theme = createTheme({
  palette: {
    primary: {
      main: '#00F',
    },
  },
  typography: {
    body1: {
      fontFamily: 'Comic Sans',
    },
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          width: 200,
        },
      },
    },
  },
})
 

и этот стиль будет применяться для каждого отдельного Button

Ссылка на ссылку: https://mui.com/customization/theme-components/#global-style-overrides