Material UI components not working in React

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

Are you importing TextField, RaisedButton, whats the error you see.., Share entire code instead of just the render function. — Dhruv Kumar Jha
– Dhruv Kumar Jha, Commented Feb 16, 2017 at 11:33
The entire code....import React, { Component, PropTypes } from 'react'; import { createContainer } from 'meteor/react-meteor-data'; import ReactDOM from 'react-dom'; import AutoComplete from 'material-ui/AutoComplete'; — Ramasamy Viswanathan
– Ramasamy Viswanathan, Commented Feb 16, 2017 at 11:35
update the ques with complete code :) snippet that you pasted in ques, there is a div mismatch, it should through the error, if you are using the same. — Mayank Shukla
– Mayank Shukla, Commented Feb 16, 2017 at 11:37

Mayank Shukla · Accepted Answer · 2017-06-14 12:41:08Z

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();

Kris Selbekk · Accepted Answer · 2017-02-16 11:57:44Z

1

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>
  );
}

answered Feb 16, 2017 at 11:57

Kris Selbekk

7,6729 gold badges50 silver badges74 bronze badges

1 Comment

Mateusz Over a year ago

Remove all comments from render, also make sure you have it all wrapped in MuiThemeProvider -> make sure you follow the Material-UI tutorial

Shahrukh Zindani · Accepted Answer · 2017-02-21 18:59:42Z

1

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>

   ); 
}

answered Feb 21, 2017 at 18:59

Shahrukh Zindani

154 bronze badges

1 Comment

Shahrukh Zindani Over a year ago

I am glad I could help. Can you please mark my answer green?

Muniro · Accepted Answer · 2022-01-16 15:00:41Z

0

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.

answered Jan 16, 2022 at 15:00

Muniro

2,2453 gold badges13 silver badges9 bronze badges

Collectives™ on Stack Overflow

Material UI components not working in React

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related