Incompatible with current Material-UI

[xcsrz]

The Material-UI example uses v0.14.4. They are currently on v0.16.4. However, attempting to use the current version of Material-UI results in the following errors:

Failed context type: The context `muiTheme` is marked as required in `Dialog`, but its value is `undefined`.
Failed context type: The context `muiTheme` is marked as required in `RenderToLayer`, but its value is `undefined`.

I have tracked this down to the creation of the wrapper element:

const wrapper = document.body.appendChild(document.createElement('div'));

This results in the confirmation elements being inserted into the DOM outside of any wrapper elements in the application, thus outside of the Material-UI theme wrapper element which provides the muiTheme context.

As a side note for the example code, among the improvements in Material-UI are how the modules are exported. So where the calls:

import Dialog from 'material-ui/lib/dialog';
import FlatButton from 'material-ui/lib/flat-button';
import RaisedButton from 'material-ui/lib/raised-button';

would look like this for the current version:

import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';

[xcsrz]

I did find a work around by wrapping the Dialog element in the Confirmation render method with inside MuiThemeProvider so it looks like:

      <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
        <Dialog
          title={title}
          actions={actions}
          modal={modal}
          open={show}
          onRequestClose={dismiss}
        >
          {confirmation}
        </Dialog>
      </MuiThemeProvider>

This is less than ideal, but if anyone is trying to use this with Material and you have a theme wrapper element created this is doable/usable. Ideally I think createConfirmation would take an optional target element.

[xcsrz]

It looks like this fork is an attempt at the parent element idea but it is not backworks compatible.

http://github.com/Akylas/react-confirm

[KunihikoHarada]

Thanks for posting this issue. Since I don't use material-ui, I did not notice this problem.
I thought it is not really necessary to share context because you can pass any object as props.
But if it comes to framework requirement, maybe it's time to fix this problem.

Putting DOM inside the React managed component is not very good idea, but maybe it would be the only solution..

I will look into it later. Hopefully, end of this month.

[KunihikoHarada]

It seems the fork you linked is not for this issue. To use context, you need to put the component inside provider's Component tree, not DOM tree.
So far, I guess there is no good way to dynamically add components to the existing react Component tree without any side effect.

I will fix this if I come up with any good idea. Sorry..