水平菜单 CSS 材质 UI ReactJS答案

【问题标题】：Horizontal Menu CSS Material UI ReactJS水平菜单 CSS 材质 UI ReactJS
【发布时间】：2017-09-20 05:56:08
【问题描述】：

我正在尝试使用 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>
    );
}
}

【问题讨论】：

标签： css reactjs ecmascript-6 material-ui

【解决方案1】：

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

是否有一个 URL 可以查看它的工作原理或可以帮助我了解正在发生的事情？光看你写的就很难了。

更新

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

<Menu autoWidth={false}>

【讨论】：

这不是我的代码，但非常相似，并且发生了我想要修复的相同情况。 jsfiddle.net/d980vcon/2
太棒了！您必须将 'width:100%' 设置为 id 为“horiz-menu”的 div 及其父级。
谢谢。我做到了，由于我不能在这里放代码，我会再次回答。
感谢您的帮助。由于我需要输入代码和图片，我将在其他答案中回答您。

【解决方案2】：

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

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

【讨论】：