Estoy creando una biblioteca de interfaz de usuario personalizada para el trabajo que usa Material-UI. La biblioteca de la interfaz de usuario tiene un tema personalizado en el que agregué al objeto de la paleta con colores personalizados de la empresa. El tema vive en la biblioteca de la interfaz de usuario, y para los elementos que viven allí, puedo usar los colores personalizados en makeStyles, pero cuando trato de usar el tema exportado en el código base principal, los colores personalizados arrojan errores en makeStyles.

Creo que el problema es que no estoy exportando el módulo personalizado del tema. No estoy seguro de cómo exportar e importar esto correctamente en la base de código principal. Actualmente, solo estoy exportando el archivo del tema e importándolo a la base de código principal.

Base de código principal :

 import { theme } from 'customUILibrary'; ... <MuiThemeProvider theme={theme}> ... </MuiThemeProvider>

Biblioteca de interfaz de usuario personalizada :

índice.ts:

 export { theme } from 'theme/theme';

tema/tema.ts

 import { createTheme, responsiveFontSizes, } from '@material-ui/core/styles'; import './extendPalette'; export const theme = responsiveFontSizes(createTheme({ palette: { gradients: { primary: 'linear-gradient(270deg, #35C7E1 -10.76%, #1A92BD 121.8%)', secondary: 'linear-gradient(270deg, #194E94 0%, #317CA6 100%)', }, }, }));

extenderPaleta.ts

 declare module '@material-ui/core/styles/createPalette' { export interface PaletteOptions { gradients: { primary: string secondary: string, }, } export interface Palette { gradients: { primary: string secondary: string, }, } }

Los atributos del tema personalizado funcionan muy bien dentro de la biblioteca de la interfaz de usuario con los elementos de la interfaz de usuario, pero cuando se importan a la base de código principal, los atributos personalizados no se seleccionan y, de hecho, causan errores.