Question

我试图按照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);

支持永久剪辑的AppDrawer

1 个答案: