Horizontales Menü CSS Material UI ReactJS

Question

Ich versuche ein horizontales Menü mit ReactJS und Material UI zu erstellen, aber ich habe folgendes Problem: Mein Menü wird korrekt angezeigt, horizontal, aber es reagiert nicht. Wenn ich die Größe der Seite im Browser ändere, hat mein Menü weiterhin die gleiche Größe wie zuvor. Es aktualisiert nur seine Größe, wenn ich mit F5 neu lade.

import React from 'react'; 
import AppBar from 'material-ui/AppBar'; 
import Drawer from 'material-ui/Drawer'; 
import MenuItem from 'material-ui/MenuItem'; 
import IconButton from 'material-ui/IconButton'; 
import NavigationMenu from 'material-ui/svg-icons/navigation/menu'; 
import NavigationClose from 'material-ui/svg-icons/navigation/close'; 
import Paper from 'material-ui/Paper'; 
import Menu from 'material-ui/Menu'; 

const style = { 
    display: 'inline-block', 
    margin: '0 32px 16px 0', 
    width: '100%' 
}; 

const styleq = { 
    display: 'inline', 
    float: 'left', 
    width: '25%' 
}; 

export default class MenuAlumno extends React.Component { 
render() { 
    return (
     <div> 
      <AppBar 
       title={<span style={STYLES.title}>- PLATAFORMA DE INCIDENCIAS -</span>} 
       onTitleTouchTap={this.handleTouchTap} 
       titleStyle={STYLES.titleStyle} 
       iconElementLeft={this.state.drawerOpen ? <IconButton><NavigationClose/></IconButton> : <IconButton><NavigationMenu/></IconButton>} 
       onLeftIconButtonTouchTap={this.controlMenu} 
      /> 
      <Paper style={style}> 
       <Menu> 
       <MenuItem primaryText="Maps" style={styleq}/> 
       <MenuItem primaryText="Books" style={styleq}/> 
       <MenuItem primaryText="Flights" style={styleq} /> 
       <MenuItem primaryText="Apps" style={styleq} /> 
       </Menu> 
      </Paper> 
     </div> 
    ); 
} 
} 

Answer 1

Ich hatte die gleiche Frage und es hat mich verrückt gemacht! lol. Ich liebe MUI, aber manchmal kann die ganze Verschachtelung die Dinge wirklich schwierig machen ... Wie auch immer, das funktionierte für mich. Halten Sie Ihre MenuItems, wie sie sind, und ändern Sie Ihr Menü Requisiten dazu:

<Menu autoWidth={false} width="100%" listStyle={{width: '0.01%'}} style={{width:'100%'}}>

Answer 2

Wahrscheinlich haben Sie ein Element mit fester Breite.

Gibt es eine URL, wo es funktioniert oder etwas, das mir helfen könnte zu verstehen, was vor sich geht? Es ist schwer, nur von dem, was du geschrieben hast.

---

UPDATE

Wenn Sie die Menu-Komponente verwenden, stellen Sie die "AUTOBREITE" Requisiten "false". Wie Sie from the code sehen können, ist der Standardwert "true", der eine Breite für das Menü erzwingt.

<Menu autoWidth={false}> 

Answer 3

ich dies tun:

render() { 
    return (

     <div style={{width:'100%'}}> 
      <AppBar 
       title={<span style={STYLES.title}>- PLATAFORMA DE INCIDENCIAS -</span>} 
       onTitleTouchTap={this.handleTouchTap} 
       titleStyle={STYLES.titleStyle} 
       iconElementLeft={this.state.drawerOpen ? <IconButton><NavigationClose/></IconButton> : <IconButton><NavigationMenu/></IconButton>} 
       onLeftIconButtonTouchTap={this.controlMenu} 
      /> 
      <Paper style={{width:'100%'}}> 
       <Menu style={{width:'100%'}}> 
       <MenuItem primaryText="Maps" style={styleq}/> 
       <MenuItem primaryText="Books" style={styleq}/> 
       <MenuItem primaryText="Flights" style={styleq} /> 
       <MenuItem primaryText="Apps" style={styleq} /> 
       </Menu> 
      </Paper> 
     </div> 
    ); 

Aber ich weiterhin das gleiche Problem haben. Die Breite ist richtig, 100%, aber es reagiert nicht, wenn ich die Größe des Browsers ändere, hat die Menüleiste dieselbe Breite wie früher. Wenn ich auf F5 setze, um Parameter 100% zu korrigieren. Aber wie gesagt, es reagiert nicht, ist behoben. Ich verstehe nicht warum.

Answer 4

dies tun (und ich habe andere Optionen ausprobiert, aber nicht funktioniert):

return (

     <div> 
      <AppBar 
       title={<span style={STYLES.title}>- PLATAFORMA DE 
INCIDENCIAS -</span>} 
       onTitleTouchTap={this.handleTouchTap} 
       titleStyle={STYLES.titleStyle} 
       iconElementLeft={this.state.drawerOpen ? <IconButton><NavigationClose/></IconButton> : <IconButton><NavigationMenu/></IconButton>} 
       onLeftIconButtonTouchTap={this.controlMenu} 
      /> 
      <Paper style={style}> 
       <Menu autoWidth={false} style={{width:'100%'}}> 
       <MenuItem primaryText="Inicio" style={styleq} 
containerElement={<Link to="/administrador/inicio" />}/> 
       <MenuItem style={styleq} >Books</MenuItem> 
       <MenuItem primaryText="Flights" style={styleq} /> 
       <MenuItem primaryText="Apps" style={styleq} /> 
       </Menu> 
      </Paper> 
     </div> 
    ); 

passieren, dass alle MenuItems überlagern, übereinander. Entschuldigung, ich habe versucht, einen IMG hochzuladen, aber ich weiß nicht, wie es geht.

Vielen Dank!