如何更改 React Material-ui 抽屉菜单项间距？

Question

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

间距示例

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;

Answer 1

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

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

这也避免了在每个项目上重复 onTouchTap 代码。

此外，我会使用路线 links 作为 MenuItem 的支柱，而不是 children。这样整个项目将是可点击的（否则它只会是 link 文本）并且您不需要将其样式设置为按钮：

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

Answer 2

我在寻找如何使用 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 的三点图标在我略微降低高度的 table 列表中仅部分可见，

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

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

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

如何更改 React Material-ui 抽屉菜单项间距？

How can I change React Material-ui Drawer menu items spacing?

css

components

styles

reactjs

material-ui

代码