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，但有时候所有的筑巢都会让事情变得非常困难...... 无论如何，这对我有用。保持您的MenuItem不变，并将您的菜单道具更改为：

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

Answer 2

你可能有一个固定宽度的元素。

是否有网址可以帮助我了解正在发生的事情？你写的东西很难。

更新

使用Menu组件时，将“autoWidth”道具设置为“false”。如您所见from the code，默认为“true”，将强制菜单的宽度。

<Menu autoWidth={false}>

水平菜单CSS材质UI ReactJS

2 个答案: