为 Drawer-AppBar Material UI ReactJS 设置 CSS

Question

当我部署我的导航栏时，组件 'PieDePagina' 移动到底部 144px（如它在 STYLE.contentStyleActive 中定义的那样），这是由于这个 CSS 修改，但我不知道怎么解决。

还有其他问题.. 如何在计算函数中设置 CSS 参数？（在我的 const STYLES 中，我有属性 TOP，我希望它是：numberOfMenuItems * -48px）。

另一个问题：如何在 const STYLE 中设置一个参数 height = $('.contenedor').heigh() （一个依赖于其他的参数）与 JQuery?

这是我的AppBar+Drawer的代码：

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

问题的答案在这里：

相对于 'PieDePagina' 只需添加一个 css 规则即可上传 Xpx。由.

为 Drawer-AppBar Material UI ReactJS 设置 CSS

Set CSS for Drawer-AppBar Material UI ReactJS

css

jquery

reactjs

material-ui