多个项目的通用MUI主题

Question

使用createTheme我已经为我的项目创建了一个主题，它运行良好。我的问题是，如何在不重复复制的情况下，将该特定主题用于我的其他项目。

我问这个Ques。他们跟梅队说：；关于你的问题，你可以把你的主题存储在一个"；共享的"；存储库，并将此repo用作所有项目的依赖项。一旦共享回购中的主题发生了更改，所有其他项目都会得到更改">

请告诉我使用它的有效方法。如何创建共享存储库。

Answer 1

我试图从博客文章中实现一些解决方案用TypeScript:扩展Material UI中的主题

在共享项目/组件库中，我创建了一个ThemeInterface.ts文件。此文件具有我希望在项目中使用的额外属性。

import { Theme } from '@mui/material/styles';
export type Modify<T, R> = Omit<T, keyof R> & R;
export type CustomTheme = Modify<
Theme,
{
space: {
small: number,
general: number,
},
borderRadius: {
general: number
},
layout: {
sidebar: {
citizenBackGroundColor: React.CSSProperties['color'];
};
};
}
>;

然后我在创建主题的地方使用它(这仍然在共享项目中(

import { createTheme } from '@mui/material';
import { CustomTheme } from './ThemeInterface';
export function createCustomTheme(): CustomTheme {
const baseTheme = createTheme({
//Here you can set your palettes etc.. 
});
return {
...baseTheme,
//Here comes the properties that we added before 
space: {
small: 2,
general: 4,
},
borderRadius: {
general: 2,
},
layout: {
sidebar: {
//themeColors.secondary is just a const 
citizenBackGroundColor: themeColors.secondary
}
},
}
}

我已经用一本故事书设置了我的组件库。

在使用共享主题的项目中，您现在可以这样做：

// App.tsx
const theme = createCustomTheme();
<ThemeProvider<CustomTheme> theme={theme}>

作为旁注。当在组件中使用故事书时，您可能需要以这种方式使用主题，否则它将无法识别您的打字。。但在消费项目中不应该需要这样做。

const theme = useTheme<CustomTheme>();