支持永久修剪AppDrawer

Question

我试图与材料UI永久修剪导航抽屉每https://material.io/guidelines/patterns/navigation-drawer.html

似乎有一个拉出来要求这一点，但尚未合并：https://github.com/callemall/material-ui/pull/6878

在这个阶段，我试图使用样式覆盖，但不能让我的左侧导航栏（纸）应用的样式marginTop: '50px',

是否有一些样品出来有关于如何与V1.0.0-alpha.21实现这一目标？

Answer 1

他们改变了你必须重写v1中某些样式的方式。内联样式不再有效。一个组件的某些部分可以用一个简单的className覆盖到组件上。请参阅此链接了解更多详情https://material-ui-1dab0.firebaseapp.com/customization/overrides。

某些组件的某些更深的嵌套属性，即只能通过覆盖类本身来访问抽屉的高度。在这种情况下，抽屉元件的纸类。

这是一个简单的例子

import React, { Component } from "react"; 
import Drawer from "material-ui/Drawer"; 
import { withStyles, createStyleSheet } from "material-ui/styles"; 
import PropTypes from 'prop-types'; 

const styleSheet = createStyleSheet("SideNav", { 
    paper: { 
    marginTop: '50px' 
    } 
}); 

class SideNav extends Component { 
    .... 
    render() { 
    return (
     <Drawer 
     classes={{paper: this.props.classes.paper}} 
     docked={true} 
     > 
     .... 
     </Drawer> 
    ); 
    } 
} 

SideNav.propTypes = { 
    classes: PropTypes.object.isRequired 
}; 

export default withStyles(styleSheet)(SideNav);