score: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.

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

score: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>

   ); 
}

score:2

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

Related Query

More Query from same tag