2017-07-06 4 views
2

グリッドレイアウトを使用してブレークポイントを実装できるので、Material-UIのプレリリースを使用しています。私はすでにコンポーネントを隠し、グリッドを使用しています。これで、DialogのwithResponsiveFullScreenコンポーネントを使用したいと思います。問題は、私はそれを使う方法を知らず、正式なページはちょっとした説明をするだけです。Material-UIダイアログでwithResponsiveFullScreenを使用する方法

2つの異なるダイアログを変更するために非表示を使用できますが、私はそのようにしてコードを複製したくないです。だから、それを使う方法を知っている人はいますか?私はDialogをxsブレークポイントでfullScreenにしたいだけです。

私は、React.Componentの拡張クラスを使用してダイアログを構築していて、自分のコンテンツを含むMaterial-UIダイアログをrender()で返しています。

答えて

4

最後に、私はwithResponsiveFullScreenの使い方を知っています。 Dialog Material-UIクラスに直接使用し、返すコンポーネントを使用してダイアログを作成する必要があります。ここで

と例:

var ResponsiveDialog = withResponsiveFullScreen()(Dialog); 
class MyDialog extends React.Component { 
    constructor(props){ super(props); }; 

    render(){ 
     return (
      <ResponsiveDialog> 
       <DialogTitle></DialogTitle> 
       <DialogContent></DialogContent> 
      </ResponsiveDialog> 
     ); 
    } 
} 

重要:は、内部の機能をレンダリングwithResponsiveFullScreenを使用しないでください。

ブレークポイントとブレークポイントだけPASとオブジェクトを変更するには:

var ResponsiveDialog = withResponsiveFullScreen({breakpoint: 'xs'})(Dialog); 
関連する問題