如何在Storybook中为Material UI设置主题

阿西夫·卡巴尼（Asif Kabani）

当前，这是我正在做的，ThemeProvider在我的组件文件上方传递：

import React from 'react';
import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import MUIButton from '@material-ui/core/Button';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#ff0000"
    }
  },
  typography: {
    fontFamily: 'Nunito Sans, sans-serif',
    button: {
      textTransform: 'none'
    }
  },
  shape: {
    borderRadius: 3
  }
})


export default ({ variant, children }) => {
  return (
    <ThemeProvider theme={theme}>
      <MUIButton
        color="primary"
        variant={variant}
      >
        {children}
      </MUIButton>
    </ThemeProvider>
  )
}

我正在尝试找出如何在Storybook的全球范围内做到这一点。这是我建立的第一个组件Button。因此，我希望能够将主题保存在外部文件中，并ThemeProvider在更高级别进行导入，因此我不必包装每个组件。希望有道理，如果有人有任何想法。

雨果

首先，建议您将主题移到单独的文件中（例如，src/stylesheet以便可以从其他文件（全局App组件和故事书预览文件）访问主题。

// src/stylesheet.ts

import { createMuiTheme } from '@material-ui/core/styles';

export const muiTheme = createMuiTheme({
  palette: {
    primary: {
      main: "#ff0000"
    }
  },
  typography: {
    fontFamily: 'Nunito Sans, sans-serif',
    button: {
      textTransform: 'none'
    }
  },
  shape: {
    borderRadius: 3
  }
})

然后，您需要以设置React应用程序的相同方式来设置故事书。为此，请尝试创建一个名为：的文件.storybook/preview.js，并将其放入其中：

// .storybook/preview.js

import React from 'react';

import { addDecorator } from '@storybook/react';
import { ThemeProvider } from '@material-ui/core/styles';

import { muiTheme } from '../src/stylesheet';

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

它将把您所有的故事都包裹在ThemeProvider。

在您的应用中，您还可以拥有一个全局App组件，该组件会将整个应用封装在ThemeProvider

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。