web-dev-qa-db-ja.com

StoryBookの中のマテリアルUIのテーマのテーマのテーマの方法

現在、これは私がしているもので、コンポーネントファイルを上に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>
  )
}
 _

ストーリーブックのグローバルレベルでこれをできることを理解しようとしています。これは私がButtonと呼ばれる最初のコンポーネントです。そのため、外部ファイルにテーマを持つことができ、ThemeProviderがより高いレベルに入ってくるので、各コンポーネントをラップする必要はありません。それが理にかなっていることを願って、誰かがいかなるアイデアを持っているならば。

reactjsmaterial-uistorybook
3
Asif Kabani

まず、テーマを別のファイルに移動することをお勧めします（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コンポーネントを持つこともできます。

もっとヘルプ： https://storybook.js.org/docs/basics/wwrity-stories/

10
Hugo