如何在NX的Storybook V6中添加材料UI V5 ThemeProvider

Question

我目前正在使用nx.dev作为monorepo。我有多个React客户端。 多亏了NX，我有一个中央材料UI配置（在LIB文件夹内）。

我正在尝试在该MUI文件夹中使用Storybook。不幸的是，themeprovider不干预。这意味着我的自定义调色板等将不会被接管。不幸的是，我不知道为什么Storybook不接受themeprovider从mui。是因为NX吗？还是这与它无关？

我认为React 18，Storybook 6和MUI 5之间存在一些问题。 但是必须有一个解决方案，因为我已经成功地建立了它，而没有NX和较低版本。 需要帮助！

在我的LIB文件夹中，有一个带有.StoryBook文件夹的MUI文件夹。

main.js

const rootMain = require('../../../.storybook/main');

module.exports = {
  ...rootMain,

  core: { ...rootMain.core, builder: 'webpack5' },

  stories: [
    ...rootMain.stories,
    '../src/lib/**/*.stories.mdx',
    '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    ...rootMain.addons,
    '@nrwl/react/plugins/storybook',
   
  ],
  webpackFinal: async (config, { configType }) => {
    // apply any global webpack configs that might have been specified in .storybook/main.js
    if (rootMain.webpackFinal) {
      config = await rootMain.webpackFinal(config, { configType });
    }

    // add your own webpack tweaks if needed

    return config;
  },
};

preview.js

import React from 'react';
import { ThemeProvider, theme } from '../src';


export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

export const decorators = [
  (Story) => (
    <ThemeProvider theme={theme}>
      <Story />
    </ThemeProvider>
  ),
]; 

尝试了

import React from 'react'
import { addDecorator } from '@storybook/react'
import { ThemeProvider } from '../src'
import { theme } from '../src'


export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

addDecorator((story) => (
  <ThemeProvider theme={theme}>
    {story()}
  </ThemeProvider>
))

i als在lib文件夹的src文件夹中

export * from './theme';

export * from '@mui/material';

一个index.ts文件，其中包含theme.ts.ts。

export const theme = createTheme({
  palette,
  spacing: [0, 4, 8, 16, 24, 32, 48, 56, 64, 80, 96],
  components: {
    ...Buttons,
  },
});

export default theme;

Answer 1

我终于发现了这个问题

react故事书。

那对我有很大帮助。

import { ThemeProvider, theme } from '../src';
import { ThemeProvider as Emotion10ThemeProvider } from 'emotion-theming';

export const decorators = [
  (Story) => (
    <Emotion10ThemeProvider theme={theme}>
      <ThemeProvider theme={theme}>
          <Story />
      </ThemeProvider>
    </Emotion10ThemeProvider>
  ),
];

Answer 2

@maxfromgermany。
我最近遇到了一个问题，并用此代码库解决了。将以下代码添加到“ .storybook/preview.js”中。

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/
    }
  }
}

import React from "react"

import { addDecorator } from "@storybook/react"
import { ThemeProvider } from "@mui/material/styles"

import { muiTheme } from "../src/config/mui-theme"

addDecorator((story) => <ThemeProvider theme={muiTheme}>{story()}</ThemeProvider>)

〜人才风暴