爲Drawer-AppBar材質UI設置CSS ReactJS

Question

當我部署我的導航欄時，組件PieDePagina移動到底部144px（因爲它在STYLE.contentStyleActive中定義），這是由於此CSS修改，但我不不知道如何解決它。

和其他問題..我怎樣才能設置一個鈣參數函數的CSS參數？ （在我的const STYLES中我有屬性TOP，我希望它是：numberOfMenuItems * -48px）。

另一個問題：如何在const STYLE中使用JQuery設置param height = $（'。contenedor'）。heigh（）（一個依賴其他參數的參數）？

這是我AppBar +抽屜的代碼：

import React from 'react'; 
import AppBar from 'material-ui/AppBar'; 
import Drawer from 'material-ui/Drawer'; 
import MenuItem from 'material-ui/MenuItem'; 
import IconButton from 'material-ui/IconButton'; 
import NavigationMenu from 'material-ui/svg-icons/navigation/menu'; 
import NavigationClose from 'material-ui/svg-icons/navigation/close'; 
/* 
import IconButton from 'material-ui/IconButton'; 
import NavigationClose from 'material-ui/svg-icons/navigation/close'; 
import FlatButton from 'material-ui/FlatButton'; 
*/ 

const STYLES = { 
title: { 
    cursor: 'pointer' 
}, 
titleStyle: { 
    textAlign: 'center' 
}, 
displayMenuTrue: { 
    position: 'relative' 
}, 
displayMenuFalse: { 
    display: 'none' 
}, 
contentStyle: { 
    transition: 'margin-left 450ms cubic-bezier(0.23, 1, 0.32, 1)', 
    marginLeft: '0px', 
    top: '0px' 
}, 
contentStyleActive: { 
    marginLeft: '256px', 
    position: 'relative', 
    top: '-144px' 
} 
}; 

export default class MenuAlumno extends React.Component { 
constructor() { 
    super(); 
    this.state = { 
     drawerOpen:false 
    } 
} 

handleTouchTap =() => { 
    //alert('Has clickado sobre el título'); 
    /* 
    console.log(this.state.abierto) 
    this.setState({ 
     abierto:true 
    }); 
    */ 

    console.log(this.state.drawerOpen) 
    this.state.drawerOpen = true; 
    console.log(this.state.drawerOpen) 

} 

controlMenu =() => { 
    if (this.state.drawerOpen) { 
     console.log(this.state.drawerOpen) 
     this.setState({ 
      drawerOpen: false 
     }); 

     $('.contenedor').css(STYLES.contentStyle); 
    } else { 
     console.log(this.state.drawerOpen) 
     this.setState({ 
      drawerOpen: true 
     }); 


$('.contenedor').css(STYLES.contentStyle).css(STYLES.contentStyleActive); 
    } 
} 

render() { 
    return (
     <div> 
      <AppBar 
       title={<span style={STYLES.title}>- PLATAFORMA DE 
INCIDENCIAS -</span>} 
       onTitleTouchTap={this.handleTouchTap} 
       titleStyle={STYLES.titleStyle} 
       iconElementLeft={this.state.drawerOpen ? <IconButton> 
<NavigationClose/></IconButton> : <IconButton><NavigationMenu/></IconButton>} 
       onLeftIconButtonTouchTap={this.controlMenu} 
      /> 
      <Drawer 
       open={this.state.drawerOpen} 
       containerStyle={this.state.drawerOpen ? 
STYLES.displayMenuTrue : STYLES.displayMenuFalse} 
      > 
       <MenuItem>Menu Item</MenuItem> 
       <MenuItem>Menu Item</MenuItem> 
       <MenuItem>Menu Item</MenuItem> 
      </Drawer> 
     </div> 
    ); 
} 
} 

這是我輸入我的組件（稱爲MenuAlumno），它也表示PieDePagina，其移動到144px頁面底部的組件：

render() { 
    return (
     <div> 
      <Cabecera/> 
      <MenuAlumno/> 
      <div class="contenedor"> 
       eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
       <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
       <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
       <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
       <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
       <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
       <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
       <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
       <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
       <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
       <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
       <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
       <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
       <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
       <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
       <br/>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
      </div> 
      <PieDePagina/> 
     </div> 
    ); 

謝謝大家。

Answer 1

的cuestion的答案在這裏：

How could I do this things in jQuery?

以及有關 'PieDePagina' 只需添加一個CSS規則，將上傳Xpx。再見。