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

Posted 2023-02-23

【中文标题】如何更改 React Material-ui Drawer 菜单项间距？

【英文标题】：How can I change React Material-ui Drawer menu items spacing?

【发布时间】：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;

【问题讨论】：

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

【参考方案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="/"> />