时间戳

首页 > 解决方案 > 如何使用自定义主题提供程序将所有反应示例包装在 styleguidist 中？

reactjs - 如何使用自定义主题提供程序将所有反应示例包装在 styleguidist 中？

问题描述

目前，Styleguidist 使用 ReactExample 来渲染组件。我想用我的自定义主题提供程序将所有 ReactExample 组件包装在一个页面中。正如您在下面看到的，所有 ReactExample 组件都位于根 Styleguide 组件之外。

 <StyleGuide />
 <ReactExample />
 <ReactExample />
 <ReactExample />

有没有办法让我配置或修改 styleguidist 以添加一个父组件来包装 styleguidist 的所有组件？

<ThemeProvider>
  <StyleGuide />
  <ReactExample />
  <ReactExample />
  <ReactExample />
</ThemeProvider>

标签： reactjsreact-styleguidist

解决方案

您可以像这样包装所有组件：

在styleguide.config.js中：

const path = require('path')
module.exports = {
  styleguideComponents: {
    Wrapper: path.join(__dirname, 'src/styleguide/Wrapper')
  }
}

组件/包装器：

import React, { Component } from 'react'
import { IntlProvider } from 'react-intl'
export default class Wrapper extends Component {
  render() {
    return (
      <IntlProvider locale="en">{this.props.children}</IntlProvider>
    )
  }
}

请参阅：https ://github.com/styleguidist/react-styleguidist/blob/master/docs/Cookbook.md#how-to-change-the-layout-of-a-style-guide

推荐阅读