Material-UI 菜单高度问题答案

【问题标题】：Material-UI Menu Height IssueMaterial-UI 菜单高度问题
【发布时间】：2017-10-14 06:09:28
【问题描述】：

我想通过应用 css 将菜单高度设置为等于窗口高度。如果页面中的元素垂直增加，那么相对于页面长度，菜单高度也应该增加。我在样式中使用了“height:100%”并尝试使用“height:100vh”，但它不起作用。

有什么帮助吗？

我有以下代码：

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 {
  background: #545454;
  color: #FFFFFF;
  text-decoration: none;
  color: white;
  margin-left: 0%;
  font-weight: bold;
}

【问题讨论】：

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

【解决方案1】：

尝试将height:100% 替换为height:30，并将相同的高度分配给lineHeight:30

【讨论】：

它不起作用..仔细阅读问题..我希望菜单高度在页面中的元素垂直增加时自动增加。例如，假设我单击“个人信息”并且页面中的元素增加并且滚动条出现，那么菜单高度也应该相对于窗口自动增加。就是这样。。
请提供更多信息作为您当前拥有的图片以及您想要的输出的图片。也尝试添加jsfiddle或codepen。

【解决方案2】：

为了覆盖高度样式，您需要使用 classes api。请参阅link 了解更多规格。在我的个人使用中以及来自 Material ui doc 的代码示例中，这里有一些来自您的代码的修改示例。我使用 withStyles 和 classes 来覆盖样式并将 className dash-menuview 更改为 dashMenuview（以便于分配）。希望对您有所帮助。

    import React from 'react';
    import PropTypes from 'prop-types';
    import Menu from 'material-ui/Menu';
    import MenuItem from 'material-ui/MenuItem';
    import { withStyles } from '@material-ui/core/styles';
    
    const styles = {
      dashMenuview {
        margin-left: -8.8%,
      },
      mydashboard {
        background: #545454,
        color: #FFFFFF,
        text-decoration: none,
        color: white,
        margin-left: 0%,
        font-weight: bold,
      },
    };
    
    class MenuView extends Component {
         constructor(props){}
         render() {
          { classes } = this.props

            return (
                <div classes={{root: classes.dashMenuview}}>
                   <Menu style={mainmenu} classes={{root: classes.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>
      );
 }
}
    
    ClassesNesting.propTypes = {
      classes: PropTypes.object.isRequired,
    };
    
    export default withStyles(styles)(ClassesNesting);

【讨论】：