我试着从博客文章Extending the theme in Material UI with TypeScript中实现一些解决方案：
在共享项目/组件库中，我创建了一个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}>

顺便说一句当在你的组件中使用storybook的时候，你可能需要这样使用theme，否则它将无法识别你的输入。但这在消耗项目中不应该需要。

const theme = useTheme<CustomTheme>();