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

Question

我目前正在使用nx.dev作为monorepo。我有多个反应客户。多亏了NX，我有了一个中央Material Ui配置(在lib文件夹中)。

我试图在那个mui文件夹中使用Storybook。不幸的是，ThemeProvider没有进行干预。这意味着我的定制调色板等不会被接管。不幸的是，我不知道为什么Storybook不接受来自MUI的Themeprovider。是因为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>
  ),
]; 

我在preview.js上试过

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>
))

在lib文件夹的src文件夹中，有一个index.ts文件包含

export * from './theme';

export * from '@mui/material';

theme.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 material-ui v5 theming doesnt work with storybook。

这对我有很大帮助。

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

@maxfromger多。我最近遇到了这样一个问题，用这个代码库解决了。将以下代码添加到“..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>)

~人才风暴