Question

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

我曾经能够做到这一点

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

但是现在我没有办法做到这一点？我是否必须使用CSS来实现这一点，如果是这样，我将它应用于哪个元素？

Answer 1

Responsive Drawer demo显示了如何使用类调整抽屉的大小。这是该演示的简化版本：

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并将类应用于包装器。

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

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

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

带有材料-ui @ next的FullScreen抽屉

1 个答案: