支持永久修剪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);