React Material-ui Drawerメニュー項目の間隔を変更するにはどうすればよいですか？

Question

ReactプロジェクトでMaterial-UIを初めて使用しようとしています。 AppBarをまとめてDrawerを呼び出すと、サイドバーからメニュー項目のリストが表示されます。私が直面している問題は、彼らが巨大なマージントップスペースを持っているということです。私は、すべての隣同士に一つずつ、これを希望

Close (X) 








About 









Contact 

間隔の

例。

Close (X) 
About 
Contact 

余分な間隔の原因はわかりません。私は今使っているデザインに類似したモックを組み込み、スペースは普通です。私は以下のすべてのコンポーネントを含んでいます。あなたはMenuブロックであなたのMenuItem Sを囲むすることがあります

コード

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

：

<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="/">} /> 

Answer 2

私は密なリストを達成するためにどのようにいくつかの問題を見つけるましたMenuItemのMenuIconを使用します。 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ための3つのドットのアイコンは、私の中で部分的にしか見えました少し高さ減少テーブルのリスト、

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

が、それは完全に表示された負の上マージンを使用して：

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