Material UI Text Eingabefeld innerhalb Appbar funktioniert nicht

Question

Ich versuche, zwei Texteingabefelder für Benutzername und Passwort rechts von Appbar mit folgendem Code einzufügen. Aber es gibt keine Ausgabe.

const AppBarExampleIconMenu =() => (< AppBar title = { < span style = { styles.title } > Test < /span>} 
      iconElementLeft = { <IconButton> < NavigationClose/> < /IconButton>} 
       iconElementRight = { <div> 
        < TextField 
        hintText = "UserName"/> 
        < TextField 
        hintText = "PassWord"/> 
        < /div> 
       } 

       /> 
      ); 

Answer 1

Versuchen Sie es jetzt. Dies ist getestet und bewährt. Beachten Sie, dass dies im ES6-Stil geschrieben ist.

class Test extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <MuiThemeProvider> 
       <AppBar 
        title={"Title"} 
        iconElementLeft={<IconButton iconClassName="muidocs-icon-custom-github" />} 
        iconElementRight={ 
         <div> 
          <TextField 
           hintText="Username" 
          /> 
          <TextField 
           hintText="Password" 
          /> 
         </div> 
        } 
       /> 

      </MuiThemeProvider> 
     ) 
    } 
}