Material UI custom theme với TypeScript

5 năm trước · 1 phút đọc

Ví dụ về việc custom theme MUI (Material UI) v5

Trường hợp sử dụng, mình muốn add thêm properties color vào Theme để reuse:

import { Theme } from '@mui/material';
....
    <Box
        sx={{
          color: (theme: Theme) => theme.color.textLight,
        }}
      >
        Fund Your Account
      </Box>

File theme.ts mình cấu trúc như sau:

import { createTheme } from '@mui/material/styles';
import { ThemeOptions as ThemeOptionsOld } from '@mui/material/styles/createTheme';

// Custom theme: Colors
const themeColors = {
  color: {
    main: `#1652f0`,
    bg: '#fcfcfc',
    textLight: '#fff',
  },
} as const;

// Override style Mui
const themeOptions: ThemeOptionsOld = {
  ...themeColors,
  palette: {
    primary: {
      main: themeColors.color.bg,
    },
  },
  typography: {
    fontSize: 14.4,
  },
  components: {
    MuiContainer: {
      styleOverrides: {
        root: {},
      },
    },
  },
};

// Update for Typescript
type CustomTheme = {
  [Key in keyof typeof themeColors]: typeof themeColors[Key];
};
declare module '@mui/material/styles/createTheme' {
  interface Theme extends CustomTheme {}
  interface ThemeOptions extends CustomTheme {}
}

// Create theme
export const theme = createTheme({ ...themeColors, ...themeOptions });

Nội dung tham khảo từ (Material v4): https://dragoshmocrii.com/material-ui-custom-theme-and-typescript/

Le Tiep

Material UI custom theme với TypeScript