reactjs - Hvordan dele opp MUI v5-tema i separate filer etter temaalternativer?

Jeg har et veldig stort MUI v5-tema med rundt 800 linjer (inkludert TypeScript-typetilpasning). Noe som dette:

let myTheme = createTheme({
  palette: {
    primary: {
      // lots of custom props
    },
    secondary: {
      // lots of custom props
    },
  },

  typography: {
    // lots of custom variants
  },
});

Jeg vil gjerne dele denne enorme filen inn i separate filer etter temaelementer. Slik:

• palett.ts
• typografi.ts
• ...osv.

Deretter i theme.ts oppretter du et tema basert på disse filene. Hvordan kan jeg gjøre det? Og hvordan håndterer jeg TypeScript typeforlengelse i dette tilfellet (hvor skal typeforlengelsen oppbevares).

Svar #1

Du utvider ikke helt tematisk kode og temaegenskaper, men jeg bygger vanligvis ut mine temaer fra en katalog kalt theme, og min createTheme er i en index.js-fil:

primær

primary.ts med dets logikk

const primary = {
  // lots of custom props
}

export default primary

sekundær

secondary.ts med dets logikk

const secondary = {
  // lots of custom props
}

export default secondary

typografi

typography.ts med logikken sin

const typography = {
  // lots of custom props
}

export default typography

tema

ta inn filene og legg dem til:

import primary from './primary.ts'
import secondary from './secondary.ts'
import typography from './typography.ts'

const myTheme = createTheme({
  palette: {
    primary,
    secondary
  },
  typography
});