Material-UI Menu Height Issue

Question

I want to set the menu height equal to window height by applying css. If the elements in the page increases vertically then with respect to the page length, the menu-height should also be increasing. I have used "height:100%" & also tried using "height: 100vh" in the styles but it's not working.

Any help??

I have the following code:

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;
}

Answer 1

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

Answer 2

In order to override height styling, you need to use classes api. please refer to link for further specs. In my personal use and also from the code example from Material ui doc, here's some revised example from your code. I used withStyles, and classes to override styling and changed className dash-menuview to dashMenuview (for easier assignment). Hope it helps.

    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);