RaisedButton produces a refs error. Switching to FlatButton resolves the error.

[x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I’m attempting to add a RaisedButton to a registration form. I’ll add a link to my repo

      <RaisedButton 
        label="Submit" 
        primary={true} 
        style={style.button} 
        onClick={() => registerUser(username, password)}
      />

Current Behavior

This button produces an error: Element ref was specified as a string (container) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).

When I replace the RaisedButton with a FlatButton, it works…

     <FlatButton 
        label="Submit" 
        primary={true} 
        style={style.button} 
        onClick={() => registerUser(username, password)}
      />

Steps to Reproduce (for bugs)

Replace FlatButton with RaisedButton in this file to see the error.

(I should add that I noticed after I pushed that material-ui was actually installed in my root directory, not directly in my client. Shouldn’t matter, but I installed it directly in my client anyway, and there was no change in the behavior.)

Context

I don’t have a lot of context beyond troubleshooting the project down to this one line (line 30 in Registration.js, linked above): replace the raised button with a flat button and it works again.

Your Environment

Tech	Version
Material-UI	0.2
React	16.2
browser	Chrome
etc

[myaraskavitch]

I got the same error with the Getting Started instructions: http://www.material-ui.com/#/get-started/usage. Switching to FlatButton worked.

[oliviertassinari]

my team and I noticed the resulting code was quite verbose for two simple components

@patrickklima We try to make the components as close as possible to the HTML binding. Hopefully, it’s making people override story much simpler and allow third parties to build better abstractions on top of us.

after I noticed v1 was having some issues in those areas.

I’m glad the issue is fixed now, I will keep working hard on fixing all the reported issues.

or instance, in the project I linked, why are the two components in-line rather than stacked?

I’m not sure to understand. Maybe you are referring to the display property. Yes, the input elements are display: inline by default. You can use the fullWidth property to make them “stacked”. I’m also considering the option to add a block property to make them display: block.