Storybook Material-UI 擴充套件

提供開發環境，協助建立 Material-UI 元件。這是 React Storybook 的擴充套件，會將您的元件包裝在 MuiThemeProvider 中。這可以加速並簡化基於 Material-UI 的應用程式的開發流程。

您可以使用此專案的示範頁面來探索任何元件的 Material-UI 主題設定，並線上建立您自己的新主題。但是若要充分利用此專案，請在您的工作環境中於本機執行。

功能

• 包裝在主題提供器中。直接開始使用基本淺色主題進行開發。
• 已注入 TapEvent 外掛程式。在行動裝置上測試。
• 切換主題。一鍵檢視外觀。
• 建立自訂主題。透過程式碼或視覺編輯器。
• 動態視覺主題編輯。探索所有可用的主題屬性。
• Google 材質色彩調色盤選擇器
• 儲存已做的變更並以 JSON 檔案下載
• 屬於 React Theming 的一部分。建立可設定主題的 React 元件。
• 適用於 Storybook 3.0

快速入門

若要快速入門最新的 storybook-addon-material-ui，您可以查看 create-material-ui-app

其中包含下列項目的工作設定

• create-react-app
• Storybook
• Material-UI
• storybook-addon-material-ui

---

開始使用

首先，安裝擴充套件

npm i storybook-addon-material-ui --save-dev

Storybook 6.1

將 storybook-addon-material-ui 新增至 storybook 擴充套件

//.storybook/main.js

module.exports = {
  stories: ['../stories/**/*.stories.(js|mdx)'],
  addons: [
    'storybook-addon-material-ui'
  ],
};

將裝飾器新增至 storybook 預覽

//.storybook/preview.js

import { muiTheme } from 'storybook-addon-material-ui'

export const decorators = [
	muiTheme()
];

注意：您可以在載入的主題之間切換。開箱即用，您有兩個基本主題，但是您可以像這樣簡單地新增自訂主題

//.storybook/preview.js

import { muiTheme } from 'storybook-addon-material-ui'

// Create your own theme like this.
// Note: you can specify theme name in `themeName` field. Otherwise it will be displayed by the number.
// you can specify only required fields overriding the `Light Base Theme`
const newTheme = {
    themeName: 'Grey Theme',
    palette: {
        primary1Color: '#00bcd4',
        alternateTextColor: '#4a4a4a',
        canvasColor: '#616161',
        textColor: '#bdbdbd',
        secondaryTextColor: 'rgba(255, 255, 255, 0.54)',
        disabledColor: '#757575',
        accent1Color: '#607d8b',
    },
};


export const decorators = [
	muiTheme([newTheme])
];

甚至從其他地方匯入

//.storybook/preview.js

import { muiTheme } from 'storybook-addon-material-ui'

import theme1 from './src/theme/theme1'
import theme2 from './src/theme/theme2'

export const decorators = [
	muiTheme([theme1, theme2])
];

Storybook 5 (和舊版本)

現在，使用 Material-UI 擴充套件來撰寫您的故事。依預設，您的故事會提供 Light Base Theme 和 Dark Base Theme

import React from 'react';
import { storiesOf, addDecorator } from '@storybook/react';
import {muiTheme} from 'storybook-addon-material-ui';

// Import some examples from react-theming https://github.com/react-theming/react-theme-provider/blob/master/example/
import CardExampleControlled from '../CardExampleControlled.jsx';
import RaisedButtonExampleSimple from '../RaisedButtonExampleSimple.jsx';
import DatePickerExampleSimple from '../DatePickerExampleSimple.jsx';

storiesOf('Material-UI', module)
// Add the `muiTheme` decorator to provide material-ui support to your stories.
// If you do not specify any arguments it starts with two default themes
// You can also configure `muiTheme` as a global decorator.
    .addDecorator(muiTheme())
    .add('Card Example Controlled', () => (
            <CardExampleControlled />
        ))
    .add('Raised Button Example Simple', () => (
            <RaisedButtonExampleSimple />
        ))
    .add('Date Picker Example Simple', () => (
            <DatePickerExampleSimple />
        ));

注意：您可以在載入的主題之間切換。開箱即用，您有兩個基本主題，但是您可以像這樣簡單地新增自訂主題

import React from 'react';
import { storiesOf, addDecorator } from '@storybook/react';

import {muiTheme} from 'storybook-addon-material-ui';

import CardExampleControlled from '../CardExampleControlled.jsx';
import RaisedButtonExampleSimple from '../RaisedButtonExampleSimple.jsx';
import DatePickerExampleSimple from '../DatePickerExampleSimple.jsx';

// Create your own theme like this.
// Note: you can specify theme name in `themeName` field. Otherwise it will be displayed by the number.
// you can specify only required fields overriding the `Light Base Theme`
const newTheme = {
    themeName: 'Grey Theme',
    palette: {
        primary1Color: '#00bcd4',
        alternateTextColor: '#4a4a4a',
        canvasColor: '#616161',
        textColor: '#bdbdbd',
        secondaryTextColor: 'rgba(255, 255, 255, 0.54)',
        disabledColor: '#757575',
        accent1Color: '#607d8b',
    },
};



storiesOf('Material-UI', module)
    .addDecorator(muiTheme([newTheme]))
    .add('Card Example Controlled', () => (
            <CardExampleControlled />
        ))
    .add('Raised Button Example Simple', () => (
            <RaisedButtonExampleSimple />
        ))
    .add('Date Picker Example Simple', () => (
            <DatePickerExampleSimple />
        ));

意見回饋

您可以透過匿名問卷調查留下您對此專案的意見。

查詢字串參數

當您選取主題和其他選項時，它會儲存在網址列中。因此，當您重新整理頁面時會保留此狀態，並且您可以使用指向所需狀態的直接連結。

https://127.0.0.1:9001/?theme-ind=0&theme-sidebar=true&theme-full=true

貢獻

開發人員

我們的團隊歡迎所有貢獻、測試和錯誤修正。如果您想要協助貢獻此專案，請隨時建立問題、PR 或與我聯繫。

設計師

我們非常歡迎設計師參與此專案。我們非常有興趣了解您對於使用此工具、設計師與開發人員共同合作的可能性，以及其外觀和功能方面的意見。

致謝