1

我想通过应用 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;

我的样式.css

.dash-menuview {
   margin-left: -8.8%;
}
.mydashboard {
  background: #545454;
  color: #FFFFFF;
  text-decoration: none;
  color: white;
  margin-left: 0%;
  font-weight: bold;
}
4

2 回答 2

0

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

于 2017-10-15T05:58:25.813 回答
0

为了覆盖高度样式，您需要使用 classes api。请参阅链接了解更多规格。在我的个人使用中以及来自 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);
于 2020-07-02T02:11:57.693 回答