Material-UI 菜单问题答案

【问题标题】：Material-UI Menu issueMaterial-UI 菜单问题
【发布时间】：2017-10-09 20:31:46
【问题描述】：

我希望菜单提供 100% 的高度。如果页面中的元素垂直增加，那么相对于页面长度，菜单高度也会增加。我在 styles 中使用了“height:100%”，但它不起作用。

有什么帮助吗？

我有以下代码：

import React, { Component } from 'react';
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
import './mystyle.css';

const mainmenu = {
 width: '180px',
 height: '100%',
};

class MenuView extends Component {
  render() {
    return (
        <div className="dash-menuview">
           <Menu style={mainmenu} className="mydashboard">
             <MenuItem primaryText="My Name" style={{color:'white'}} href="#/name" onClick={handlers.changeURL}/>
             <MenuItem primaryText="Personal Information" style={{color:'white'}} href="#/information" onClick={handlers.changeURL}/>
             <MenuItem primaryText="My Address" style={{color:'white'}} href="#/current" onClick={handlers.changeURL}/>
             <MenuItem primaryText="My Files" style={{color:'white'}} href="#/files" onClick={handlers.logout}/>  
           </Menu>
        </div>
    );
  }
}
export default MenuView;

mystyle.css

.dash-menuview {
   margin-left: -8.8%;
}
.mydashboard a {
  color: #FFFFFF;
  text-decoration: none;
}

【问题讨论】：

请您为此设置一个 plunkr 吗？

标签： javascript css reactjs material-ui menu-items

【解决方案1】：

您可以像下面的代码一样使用height: 100vh，我只是在其中放置了您代码的示例输出。

.dash-menuview {
   margin-left: 0;
   background :#444;
   height: 100vh;
}
.mydashboard a {
  color: #FFFFFF;
  text-decoration: none;
  display: block;
}

<div class="dash-menuview">
    <Menu class="mydashboard">
        <a href="#">My Name</a>
        <a href="#">Personal Information</a>
        <a href="#">My Address</a>
        <a href="#">My Files</a>  
    </Menu>
</div>

你也可以查看这个Fiddle.希望对你有帮助。

【讨论】：