Material UI components not working in React - reactjs

Question

I have the following code snippet, which doesn't display anything at all in the browser window. Can you please tell me why.
render(){
return (
<div>
//Rama
//console.log('In Render'),
<div>
enter code here
<div>
<TextField
hintText="Username"
/>
<br/>
<TextField
hintText="Password"
/>
<br/>
<RaisedButton label="Login" primary={true} />
</div>
<div>
<TextField>Login Successful</TextField>
</div>
</div>
)
}
pastebin link for complete component: http://pastebin.com/etjUwvWT

Answer 1

To render material-ui components you need to wrap them in MuiThemeProvider.
As Per DOC:
Beginning with v0.15.0, Material-UI components require a theme to be
provided. The quickest way to get up and running is by using the
MuiThemeProvider to inject the theme into your application context.
How to use these components?
First use this line to import MuiThemeProvider :
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
Use this render method:
render(){
return (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<div>
<div>
<TextField
hintText="Username"
/>
<br/>
<TextField
hintText="Password"
/>
<br/>
<RaisedButton label="Login" primary={true} />
</div>
<div>
<TextField/>
</div>
</div>
</MuiThemeProvider>
);
}
If you are using material-ui components across the project then no need to use MuiThemeProvider on each page, you also include it globally. Include this in your router or put this line on main page of the application.
One more thing you are only importing the injectTapEventPlugin, you need to initialise that also. Put this line in this component after importing:
injectTapEventPlugin();

Answer 2

Looks like you're having JS-comments (//) in your JSX code. That'll make stuff break.
If you want to comment something out in JSX, you have to escape into JS with curly brackets and then use multi line comments (/* comment */) - like so:
render() {
return (
<div>
{/* <button>Commented out button</button>*/}
</div>
);
}

Answer 3

Remove text from between the TextField tags. Also wrap your code in your render method between MuiThemeProvider.
This worked for me.
render(){
return (
<MuiThemeProvider>
<div>
<div>
<TextField
hintText="Username"
/><br/>
<TextField
hintText="Password"
/><br/>
<RaisedButton label="Login" primary={true} />
</div>
<div>
<TextField></TextField>
</div>
</div>
</MuiThemeProvider>
);
}

Answer 4

As an FYI, so it is not the most obvious responses, but just in case this is your situation, my issue was that I had changed my Windows 10 personalise settings to use contrast and my blue bar in my React app disappeared! After a while of searching, I switched it off and my bar was back.