CODEWITHSUNDEEP
reactjsmaterial-ui
Ramasamy Viswanathan
Ramasamy Viswanathan

Reputation: 59

Material UI components not working in React

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

Upvotes: 2

Views: 13444

Answers (4)

Muniro
Muniro

Reputation: 2207

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.

Upvotes: 0

Mayank Shukla
Mayank Shukla

Reputation: 104369

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

Upvotes: 2

Shahrukh Zindani
Shahrukh Zindani

Reputation: 15

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>

   ); 
}

Upvotes: 1

Kris Selbekk
Kris Selbekk

Reputation: 7614

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

Upvotes: 1

Related Questions