Currently, Styleguidist uses ReactExample to render components. I want to wrap all the ReactExample components in a page with my custom theme provider. As you see below, all the ReactExample components fall outside of the root Styleguide Component.
<StyleGuide />
<ReactExample />
<ReactExample />
<ReactExample />
Is there a way for me to configure or modify styleguidist to add a parent component that will wrap all the components of styleguidist?
<ThemeProvider>
<StyleGuide />
<ReactExample />
<ReactExample />
<ReactExample />
</ThemeProvider>
You can wrap all components like this:
in styleguide.config.js :
const path = require('path')
module.exports = {
styleguideComponents: {
Wrapper: path.join(__dirname, 'src/styleguide/Wrapper')
}
}
components/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>
)
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.