时间戳

首页 > 解决方案 > 使用 Material-UI 从 UI 库中导出自定义主题

javascript - 使用 Material-UI 从 UI 库中导出自定义主题

问题描述

我正在为使用 Material-UI 的工作创建一个自定义 UI 库。UI 库有一个自定义主题，我在其中添加了自定义公司颜色的调色板对象。主题存在于 UI 库中，对于存在于其中的元素，我可以在 makeStyles 中使用自定义颜色，但是当我尝试在主代码库中使用导出的主题时，自定义颜色会在 makeStyles 中引发错误。

我相信问题是我没有导出主题的自定义模块。我不确定如何将其正确导出和导入到主代码库中。目前，我只是导出主题文件并将其导入主代码库。

主要代码库：

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

自定义UI库：

索引.ts：

export { theme } from 'theme/theme';

主题/theme.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%)',
        },
    },
 
}));

扩展调色板.ts

    declare module '@material-ui/core/styles/createPalette' {

    export interface PaletteOptions {
        gradients: {
            primary: string
            secondary: string,
        },
    }
    export interface Palette {
        gradients: {
            primary: string
            secondary: string,
        },
    }

}

自定义主题属性在 UI 库中与 UI 元素一起工作得很好，但是当导入主代码库时，自定义属性不会被拾取，实际上会导致错误。

标签： javascriptreactjstypescriptmaterial-ui

解决方案

正如这里所建议的，您可以执行以下操作：

declare module "@mui/material/styles" {
  interface Palette {
    custom: {
      pink: string;
    };
  }
  interface PaletteOptions {
    custom: {
      pink: string;
    };
  }
}

然后你可以安全地设置你在主题中的价值：


const theme = createTheme({
  palette: {
    custom: {
      pink: "pink"
    }
  }
});

并在样式中使用它：

<Button sx={{ color: "custom.pink" }}>Content</Button>

请参阅我的代码框示例

推荐阅读