Docz: Allow ThemeProvider to accept multiple children

[denisborovikov]

Feature Request

The new upcoming version of styled-components introduced the new way of working with global styles. Instead of direct styles injecting the global styles now a component which should be rendered.

More info migrating guide, API references

The problem with it that it's not possible to integrate global styles into the docz.

Here what I did it before:

Wrapper.js

import React from 'react';
import { ThemeProvider } from 'styled-components';
import { theme } from 'shared/theme';
import './global.css';

// Docz application wrapper
const DoczWrapper = ({ children }) => (
  <ThemeProvider theme={theme}>{children}</ThemeProvider>
);

export default DoczWrapper;

global.css.js

injectGlobal`...`;

As global styles is a component now, it should be rendered (global.css is global.css.js with createGlobalStyle inside):

Wrapper.js

import { GlobalStyle }  from './global.css';

// Docz application wrapper
const DoczWrapper = ({ children }) => (
  <ThemeProvider theme={theme}>
    {children}
    <GlobalStyle />
  </ThemeProvider>
);

global.css.js

export const GlobalStyle = createGlobalStyle` ...`;

But ThemeProvider expects only single child and throws an error

React.Children.only expected to receive a single React element child.

It's not also possible to pass children prop inside GlobalStyle, it's not expected to have children at all.

Possible workaround is to modify GlobalStyle component

global.css.js

const GlobalStyle = createGlobalStyle` ...`;
export const GlobalStyleWrapper = ({ children }) => <>{children}<GlobalStyle /></>

Wrapper.js

import { GlobalStyleWrapper }  from './global.css';

// Docz application wrapper
const DoczWrapper = ({ children }) => (
  <ThemeProvider theme={theme}>
    <GlobalStyleWrapper>{children}</GlobalStyleWrapper>
  </ThemeProvider>
);

but it would be esier to allow ThemeProvider accepts multiple children.

[mpivaa]

I don't think this is a problem of docz itself. Try to wrap the children in a Fragment:

<ThemeProvider theme={{ fontFamily: 'Helvetica Neue' }}>
  <React.Fragment>
    {children}
    <GlobalStyle whiteColor />
  </React.Fragment>
</ThemeProvider>

[denisborovikov]

Shame on me, I forget about the Fragment.