Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Material-UI Integration

See original GitHub issue

Hello everyone i wonder if i might get help integrating Material-UI into this boilerplate. adding this simple wrapper + header components:

<MuiThemeProvider muiTheme={getMuiTheme()}>
          <Helmet {...config.app.head}/>
            <AppBar
              title="Title"
              iconClassNameRight="muidocs-icon-navigation-expand-more"
            />
</MuiThemeProvider>

to App container leads to errors:

Warning: Failed propType: Invalid prop `children` supplied to `MuiThemeProvider`, expected a single ReactElement. Check the render method of `App`.
[1] [piping] can't execute file: /home/kirill/code/react-redux-universal-hot-example/bin/server.js
[1] [piping] error given was: Invariant Violation: MuiThemeProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
[1]     at invariant (/home/kirill/code/react-redux-universal-hot-example/node_modules/fbjs/lib/invariant.js:38:15)
[1]     at ReactCompositeComponentMixin._renderValidatedComponent (/home/kirill/code/react-redux-universal-hot-example/node_modules/react/lib/ReactCompositeComponent.js:713:156)
[1]     at wrapper [as _renderValidatedComponent] (/home/kirill/code/react-redux-universal-hot-example/node_modules/react/lib/ReactPerf.js:66:21)
[1]     at ReactCompositeComponentMixin.performInitialMount (/home/kirill/code/react-redux-universal-hot-example/node_modules/react/lib/ReactCompositeComponent.js:291:30)
[1]     at ReactCompositeComponentMixin.mountComponent (/home/kirill/code/react-redux-universal-hot-example/node_modules/react/lib/ReactCompositeComponent.js:222:21)
[1]     at wrapper [as mountComponent] (/home/kirill/code/react-redux-universal-hot-example/node_modules/react/lib/ReactPerf.js:66:21)
[1]     at Object.ReactReconciler.mountComponent (/home/kirill/code/react-redux-universal-hot-example/node_modules/react/lib/ReactReconciler.js:39:35)
[1]     at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/home/kirill/code/react-redux-universal-hot-example/node_modules/react/lib/ReactMultiChild.js:203:44)
[1]     at ReactDOMComponent.Mixin._createContentMarkup (/home/kirill/code/react-redux-universal-hot-example/node_modules/react/lib/ReactDOMComponent.js:593:32)
[1]     at ReactDOMComponent.Mixin.mountComponent (/home/kirill/code/react-redux-universal-hot-example/node_modules/react/lib/ReactDOMComponent.js:478:29)

I suspect server rendering being the issue but not compitent enough to solve it myself Please Help 🙌

Issue Analytics

State:
Created 7 years ago
Comments:7

Top GitHub Comments

157reactions

AndreLioncommented, Jul 28, 2016

@vijay122

I guess the real issue is: you can have only one child under <MuiThemeProvider />

e.g.

<MuiThemeProvider>
    <p>text</p>
    <a href="#">link</a>
</MuiThemeProvider>

should be:

<MuiThemeProvider>
    <div>
        <p>text</p>
        <a href="#">link</a>
    </div>
</MuiThemeProvider>

8reactions

xech3l0nxcommented, Jan 3, 2017

@AndreLion you freaking saved my day, bless you

Top Results From Across the Web

Usage - Material UI - MUI

Material UI is a mobile-first component library—we write code for mobile devices first, and then scale up the components as necessary using CSS...

How to Implement Material-UI in React - Section.io

Material -UI is simply a library that allows us to import and use different components to create a user interface in our React...

ReactJS - Material UI - Tutorialspoint

ReactJS - Material UI, React community provides a huge collection of advanced UI component framework. Material UI is one of the popular React...

How to integrate Material UI to React Js Application or Third ...

Material UI is a library of React UI components that implements Google's Material Design. Material UI is an open-source React component library that...

Material UI Tutorial - React School

Using Material UI - Rendering a Button ... Using the components is simple. Just import the component from the library and render it...