Question

我想通过应用css将菜单高度设置为窗口高度。如果页面中的元素垂直增加，那么相对于页面长度，菜单高度也应该增加。我用过＆＃34;身高：100％＆＃34; ＆安培;也尝试使用＆＃34;身高：100vh＆＃34;在风格，但它不起作用。

任何帮助??

我有以下代码：

INotifyPropertyChanged

mystyle.css

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;

Answer 1

尝试将height:100%替换为height:30，并将相同的高度指定为lineHeight:30

Answer 2

为了覆盖高度样式，您需要使用api类。请参阅link了解更多规格。在我个人使用的情况下，也从Material ui doc的代码示例中，这是您的代码中经过修订的示例。我使用了withStyles和类来覆盖样式，并将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);

Material-UI菜单高度问题

2 个答案: