水平菜单 CSS Material 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

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

是否有 URL 在哪里可以看到它的工作原理或可以帮助我了解发生了什么的东西？单从你写的就很难。

更新

使用菜单组件时，将 "autoWidth" 属性设置为 "false"。如您所见 from the code，默认值为 "true"，这将强制菜单的宽度。

<Menu autoWidth={false}>

Answer 2

我也有同样的问题，这让我发疯了！哈哈。我喜欢 MUI，但有时所有的嵌套都会让事情变得非常困难...... 无论如何，这对我有用。保持 MenuItems 不变，并将 Menu 属性更改为：

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

水平菜单 CSS Material UI ReactJS

Horizontal Menu CSS Material UI ReactJS

css

ecmascript-6

reactjs

material-ui