如何在Material-UI對話框上使用withResponsiveFullScreen

Question

如果您可以使用網格佈局並實現斷點，則使用Material-UI的預發佈。我已經使用隱藏的組件和網格，現在我想使用Dialog的withResponsiveFullScreen組件。問題是我不知道如何使用它和官方網頁只是給一點解釋。

我可以使用隱藏爲了改變兩個不同的對話框之間，但我不喜歡以這種方式重複我的代碼。那麼是否有人知道如何使用它？我只想讓Dialog在xs斷點處全屏。

我使用React.Component的擴展類構造我的對話框，並在render（）處返回一個Material-UI對話框和我自己的內容。

Answer 1

最後，我知道如何使用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);