带材质的全屏抽屉-ui@next

Question

我将如何从material-ui版本中的第一个版本重新创建全屏抽屉@next？

我曾经能够做到这一点

<Drawer width={'100%'} open={this.props.eventsDrawer} className="events-drawer">
...
</Drawer>

但现在我看不到这样做的方法？我是否必须使用 CSS 来实现这一点，如果是这样，我将它应用于什么元素？

Answer 1

该响应抽屉演示显示了如何使用大小类抽屉。这是该演示的精简版：

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

const styles = {
  drawerPaper: {
    width: '100%',
  },
};

const ResponsiveDrawer = ({ classes }) => (
  <div>
    <Drawer
      type="temporary"
      classes={{
        paper: classes.drawerPaper,
      }}
    >
      ...
    </Drawer>
  </div>
);

export default withStyles(styles)(ResponsiveDrawer);

该Drawer会弯曲，以填补其容器，所以要改变其大小，您缠绕Drawer和应用类的包装。

在这个演示中，我们styles使用 JSS在对象中定义一个类，并使用withStyles高阶组件为ResponsiveDrawer组件提供类对象。

withStyles还将接受工厂函数，如果您需要引用主题变量，这就是您要做的。这是在本演示的完整版本中完成的。

这种方法在Overriding with classes中有更详细的描述。