带有素材用户界面的故事书单播无法在repos之间共享主题。

Question

我有一个经典的原子/分子/有机体，通过故事书来创建一个定制的组件库。同时，这样一个库是基于MUI的，它应用了一个自定义主题。所有这些都是用TypeScript构建的。

我决定将我们的库建立在MUI上，因为开发自定义组件对我们来说可能更容易、更快，但在我节省时间制作它们的同时，我将剩余的时间用于修复构建的问题：

主题

在atoms回购上，我添加了我们的自定义主题json，它是由其他repos (molecules和organisms)导入的，它还作为原子库的一部分导出，可以应用于外部项目。

它使用一个基本的MUI作为一个基本的主题，它已经通过一些品牌的改变和一些定制的颜色进行了更新(这是问题所在)。为了使这些自定义颜色可用，我在同一个Theme/文件夹中创建了一个Theme/文件来声明添加的内容：

import '@mui/material/styles';

declare module '@mui/material/styles' {
  interface Palette {
    myColor: Palette['primary'];
  }


  interface PaletteOptions {
    myColor?: PaletteOptions['primary'];
  }
}

// Updated Button's props so it allows the color
declare module '@mui/material/Button' {
  interface ButtonPropsColorOverrides {
    myColor: true;
  }
}

然后将它们应用于每个回购的.storybook/preview.js文件，如下所示：

import { ThemeProvider as MUIThemeProvider, createTheme } from '@mui/material/styles';
import { ThemeProvider } from 'emotion-theming';
import theme from '../stories/Theme';
import { withThemes } from '@react-theming/storybook-addon';

const providerFn = ({ theme, children }) => {
  // this fixes some issues between emotion and mui theming
  const serialTheme = JSON.parse(JSON.stringify(theme));
  const muiTheme = createTheme(serialTheme);

  return (
    <MUIThemeProvider theme={muiTheme}>
      <ThemeProvider theme={muiTheme}>{children}</ThemeProvider>
    </MUIThemeProvider>
  );
};
const themingDecorator = withThemes(null, [theme], {
  providerFn,
});

export const decorators = [themingDecorator];

一切都很顺利。我可以轻松地使用MUI组件和我的主题。嗯，不完全是.

问题所在

虽然我可以从任何其他回购中访问主题，但它似乎找不到自定义颜色声明，因此每次我尝试使用类似于theme.palette.myColor.main的东西(如上面的示例所示)时，我都会得到一个

Property 'myColor' does not exist on type 'Palette'.ts(2339)

我发现，很明显，如果我只是在createPalette.d.ts上复制，比方说，molecules回购，当我使用它的时候，它不会抱怨，而且它用它的主、暗、轻自动完成它.选项。然而，在“构建”上仍然存在错误。

stories/ComponentFolder/index.tsx: error TS2339: Property 'myColor' does not exist on type 'Palette'.

我的思想

1. 我认为最明显的解决方案是在任何其他回购上导入/扩展createPalette.d.ts，但我似乎没有找到这样做的方法，但在构建时也存在问题。
2. 如果我在任何其他项目中导入主题，我不相信这会起作用，因为它可能会再次抱怨“调色板”类型上不存在的属性。
3. 我可能只是做错了这一切，主题应该以不同的方式存储和应用。对于这样的事情，最好的方法是什么？

备注

我还将主题作为库的一部分进行导出，因为我还没有找到一种方法来构建和发布我的主题应用程序库。目前，我正在导入它：import theme from '@mylibrary/atoms/lib/Theme'并将其应用于<ThemeProvider />。在某种程度上，这基本上是相同的问题，但它影响的不是影响在我的单一功能范围内的其他回复，而是影响任何其他的反应应用程序，试图利用库。

我真的，真的希望有人能对此有所了解，或者分享他们创造类似事物的方式。

Answer 1

我认为您正在导入一个接口并将它用作一个主题，非常肯定您需要使用一个主题对象，如与物料用户界面一起使用中所示

const theme = {
  palette: {
    primary: {
      main: '#556cd6',
    },
    secondary: {
      main: '#19857b',
    },
    error: {
      main: red.A400,
    },
    background: {
      default: '#fff',
    },
  },
};