Búsqueda de sitios web

typescript - ¿Cómo reexportar definiciones de tema MUI sobrescritas?


Tengo un proyecto que ya tiene todo el tema de MUI creado, todo funciona correctamente. Ahora me gustaría extraer el tema definido como una librería separada (ej: @myproject/theme) de manera que pueda compartirlo/republicarlo en varias aplicaciones, de esa forma, cuando la librería de tema se actualice, todas las aplicaciones descendentes también heredarán todos los cambios.

En la mayoría de los casos, funcionó bien, sin embargo, estoy teniendo problemas para propagar las variants sobrescritas con MUI. Por ejemplo, tengo las siguientes variants definidas para el Button:

declare module '@mui/material/Button' {
  interface ButtonPropsVariantOverrides {
    toolbar: true;
  }
}

export const myThemeOptions = {
  components: {
    MuiButton: {
      variants: [
        {
          props: { variant: 'toolbar' },
          style: { ... }
        }
      ]
    }
  }
}

export myLightTheme = createTheme(myThemeOptions, 'light'));

Entonces, el código anterior solía funcionar perfectamente dentro del proyecto (antes de separarlo como una librería), y VSCode podía ver la variante toolbar agregada. Sin embargo, una vez que el tema se mueve a un nuevo proyecto/librería (por ejemplo: @myproject/theme y luego digamos que ejecuto, npm install -D @myproject/[email ), ya no reconocería las variants agregadas:

¿Cómo puedo reexportar la definición y luego, de alguna manera, cargar/reescribir automáticamente las definiciones de MUI en las aplicaciones consumidoras? ¿Cuál es la forma correcta de lograr lo que estoy intentando hacer?

Hazme saber si debería usar un título de pregunta diferente.

Respuesta #1

Intenta poner todas las declaraciones

declare module '@mui/material/Button' {
    interface ButtonPropsVariantOverrides {
        toolbar: true;
    }
}

en el mismo archivo allí tienes la creación del tema

export myLightTheme = createTheme(myThemeOptions, 'light'));

Respuesta #2

Si tu tema no tiene un archivo .d.ts con todas las sobreescrituras/declaraciones, deberías añadirlo. Y ten en cuenta que se (la ruta exacta del archivo) añade a tu tsconfig.json en la lista de compilerOptions -> typeRoots.