【问题标题】：How can I change React Material-ui Drawer menu items spacing?如何更改 React Material-ui Drawer 菜单项间距？
【发布时间】：2017-08-04 02:13:48
【问题描述】：

我第一次尝试在 React 项目中使用 Material-UI。我已经将 AppBar 放在一起来调用 Drawer，并且从侧边栏中显示菜单项列表。我面临的问题是它们的边距顶部间距很大。

间距示例

Close (X)








About









Contact

我希望这些都一个接一个。

Close (X)
About 
Contact

我不确定是什么导致了额外的间距。我将一个与我现在使用的设计类似的模型放在一起，并且间距是正常的。我在下面包含了完整的组件。

代码

import React, { Component } from 'react'
import { Router, Route, Redirect, IndexRoute, Link, hashHistory } from 'react-router'; 
import AppBar from 'material-ui/AppBar'
import Menu from 'material-ui/Menu'
import MenuItem from 'material-ui/MenuItem'
import Drawer from 'material-ui/Drawer'
import FlatButton from 'material-ui/FlatButton'

class AppBars extends Component {
    constructor(props) {
        super(props) 
            this.state = {
                open: false
            }
    }

    //toggleDrawer = () => this.setState({open: !this.state.open});

    toggleDrawer() {
        this.setState({
            open: !this.state.open,
        });
    }

    render() {
        return(
            <div>
                <AppBar
                    title="Advanced Surface Innovations"
                    onLeftIconButtonTouchTap={this.toggleDrawer.bind(this)} 
                />
                <Drawer open={this.state.open} onToggleDrawer={this.toggleDrawer.bind(this)}>
                    <MenuItem onTouchTap={this.toggleDrawer.bind(this)}>
                    CLOSE ( X )
                    </MenuItem>
                    <MenuItem onTouchTap={this.toggleDrawer.bind(this)}><Link to="/"> 
                        <FlatButton label="Home" primary={true} />
                    </Link>
                    </MenuItem>
                    <MenuItem onTouchTap={this.toggleDrawer.bind(this)}><Link to="/About"> 
                        <FlatButton label="About" primary={true} />
                    </Link>
                    </MenuItem>
                    <MenuItem onTouchTap={this.toggleDrawer.bind(this)}><Link to ="/Contact"> 
                        <FlatButton label="Contact" primary={true} />
                    </Link>
                    </MenuItem>
                </Drawer>
            </div>
        )
    }
}

class NavBar extends Component {
    constructor(props) {
        super(props)
        this.state = {
            nav: ''
        }
    }

    handleScroll(event) {
        console.log('handleScroll invoked');
    }

    componentDidMount() {
        console.log('componentDidMount invoked');
        window.addEventListener('scroll', this.handleScroll);
    }

    componentWillUnmount() {
        console.log('componentWillUnmount invoked');
        window.removeEventListener('scroll', this.handleScroll);
    }

    render() {
        return (
            <div>
                 <AppBars />
            </div>
        )
    }
}

export default NavBar;

【问题讨论】：

我做了一个快速测试，看看抽屉是否会以你提到的方式呈现菜单项，但我无法重现那个大间距问题。

标签： css reactjs styles components material-ui

【解决方案1】：

我在查找如何使用 MenuIcon 完成密集的 MenuItem 列表时遇到了一些问题。查看 MenuItem 源显示我可以使用“lineHeight”影响间距。但是由“minHeight”确定的间距有一个最小限制。因此，通过将 minHeight 设置为小于或等于所需的 lineHeight，外观将适应我的需求。

const denseStyle = {
  minHeight:"10px",
  lineHeight: "25px",      // Smaller: Height of menu item row
  fontSize: "12px",        // Smaller font
  // color:"#0000ff"
};

所以对于每个菜单项都有一个样式：

<MenuItem style={denseStyle} onClick={.......

另外，在我的情况下，IconMenu 的三点图标在我略微降低高度的表格列表中仅部分可见，

<TableRow style={{height:"20px"}}>......

但使用负的上边距它完全显示：

<IconMenu style={{ marginTop: "-12px" }}.......

【讨论】：

这非常接近。至少我可以控制链接之间的行间距的高度。到目前为止仍然没有好的解决方案

【解决方案2】：

您可能希望将您的 MenuItems 包含在 Menu 块中：

<Drawer open={this.state.open} onToggleDrawer={this.toggleDrawer.bind(this)}>
  <Menu onItemTouchTap={this.toggleDrawer.bind(this)}>
    <MenuItem >
      CLOSE ( X )
    </MenuItem>
    …
  </Menu>
</Drawer>

这也使您不必在每个项目上重复 onTouchTap 代码。

另外我会使用路由链接作为MenuItem 的道具，而不是作为孩子。这样整个项目将是可点击的（否则它将只是链接文本）并且您不需要将其设置为按钮：

<MenuItem primaryText="Home" containerElement={<Link to="/">} />

【讨论】：