フルスクリーン引き出し材質-ui @ next

Question

バージョンの最初のmaterial-uiバージョンのフルスクリーン引き出しフォームを再作成するにはどうすればよいですか？

私はこの

<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でより詳細に説明されています。