水平菜單CSS材質UI ReactJS

Question

我想用ReactJS和Material UI做一個水平菜單，但我遇到了以下問題：我的菜單在水平方向上顯示正確，但沒有響應。當我在瀏覽器中更改頁面的大小時，我的菜單繼續像以前一樣具有相同的大小。它只更新它的大小，當我重新加載F5。

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

我有同樣的問題，它一直讓我瘋狂！大聲笑。我喜歡MUI，但有時候所有的嵌套都會讓事情變得非常困難...... 無論如何，這對我來說很有效。保持你的MenuItems因爲他們是和改變你的菜單道具這樣的：

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

Answer 2

您可能有一個固定寬度的元素。

有沒有一個URL可以在哪裏看到它的工作或可以幫助我瞭解發生了什麼？從你寫的內容來看很難。

---

UPDATE

當您使用菜單組件，設置 「autoWidth」 道具 「假」。 正如你可以看到from the code，默認值爲「true」，將強制菜單的寬度。

<Menu autoWidth={false}> 

Answer 3

我這樣做：

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

但我仍然有同樣的問題。寬度是正確的，100％但它沒有響應，當我改變瀏覽器的大小時，MenuBar繼續具有與先前相同的寬度。當我點擊F5設置來糾正100％的參數。但正如我所說，它沒有反應，是固定的。我不明白爲什麼。

Answer 4

這樣做（我已經嘗試過其他的選擇，但不工作）：

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

發生，所有的菜單項疊加，一個在另一個之上。對不起，我試圖上傳IMG，但我不知道它是如何做到的。

謝謝！