Material-ui: Toolbar in Dialog Title -> Warning: You cannot call prepareStyles() on the same style object more than once.

[tokn136]

I try to use a toolbar in the dialog title:
<Dialog title={<Toolbar></Toolbar>} />

Console output:

Warning: You cannot call prepareStyles() on the same style object more than once.

What am I doing wrong here?

• Material-UI: v0.15.0
• React: 15.0.2
• Browser: Chrome 50

[tszekely]

I also get this warning on LinearProgress with something like this

<CardMedia>
...
          <LinearProgress
            key={`progress-buffer-${track.id}`}
            className={s.trackListItemProgressBar}
            mode="determinate"
            value={this.state.buffered}
            max={this.state.duration} />
...
</CardMedia>

[dptoot]

I am also getting the same error including a Paper element within a CardText

<CardMedia>
    <Paper zDepth={3}>
        <RemoteApiImage path={answerImage} width={width}/>
    </Paper>
</CardMedia>

[gorillatron]

Also getting this for:

<Dialog
  title={
    <AppBar
      title="Legg til Rase"
      showMenuIconButton={false}
      style={{paddingTop: "10px", paddingBottom: "10px"}}
    ></AppBar>
  }
  modal={true}
  open={this.props.open}
> ... </Dialog>

[gvandyk-r7]

Also getting for <CardActions style={{ textAlign: 'center', padding: '0px' }}> ... </CardActions>

[a17]

Also getting this for <Dialog title={<Tabs ... />} />.

[nearapogee]

Also getting this when nesting Cards. Seems to be related to getStyles in Paper, but stopped looking.

<Card>
  <Card>
  </Card>
</Card>

• Material UI 0.16.4

[yanickrochon]

What's the resolve to this issue?

Edit: in most case, a workaround is to wrap the component inside a div. For example :

<Dialog title={ <div><Tabs ... /></div> } ... >

[PolGuixe]

@ochicf and I we have come with a hack that omits this warning: https://github.com/callemall/material-ui/blob/master/src/utils/callOnce.js

Use Case
We wanted to use <Paper/> as the containerElement for a <GridTile/>, it worked but we were getting the annoying warning.

Hack
And I say hack and not solution, because this feels like a total hack:

import React from 'react';
import {Paper} from 'material-ui';
import _ from 'lodash';

class PaperForGridTile extends React.Component {
  render() {
    return (
        <Paper
          {...this.props}
          style={_.omit(this.props.style, [ 'muiPrepared' ])}
        />
    );
  }
}

export default PaperForGridTile;

What is the worst that can happen?

[astanecki]

@yanickrochon true, in nested FlatButton in MediaCard also works 👍

[roisafirorichard]

@yanickrochon Thanks That works for me

[oliviertassinari]

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. We changed the styling solution, it's no longer an issue.