Полноэкранный ящик с ui @ next

Как мне воссоздать полноэкранный ящик из первой material-ui версии в @next версии?

Раньше я мог это делать

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

Но теперь я не вижу способа сделать это? Придется ли мне использовать CSS для достижения этой цели, и если да, то к какому элементу применить его?


material-ui
person Jordan    schedule 07.12.2017    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Демонстрация адаптивного ящика показывает, как можно изменить размер ящика с помощью классов. Вот урезанная версия этой демонстрации:

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 также примет фабричную функцию, что вы бы сделали, если бы вам нужно было ссылаться на переменные темы. Это сделано в полной версии этой демонстрации.

Этот подход более подробно описан в разделе Переопределение с помощью классов.

person Ken Gregory    schedule 09.12.2017