为Drawer-AppBar材质UI设置CSS ReactJS

问题描述：

当我部署我的导航栏时，组件PieDePagina移动到底部144px（因为它在STYLE.contentStyleActive中定义），这是由于此CSS修改，但我不不知道如何解决它。为Drawer-AppBar材质UI设置CSS ReactJS

和其他问题..我怎样才能设置一个钙参数函数的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> 
    );

谢谢大家。

答

的cuestion的答案在这里：

How could I do this things in jQuery?

以及有关 'PieDePagina' 只需添加一个CSS规则，将上传Xpx。再见。

为Drawer-AppBar材质UI设置CSS ReactJS

相关推荐