如何在材料UI中進行響應式抽屜？

Question

默認組件抽屜始終像在所有組件頂部的模式窗口一樣打開。 但是我需要響應式組件抽屜才能像在容器內部的左側菜單中那樣打開抽屜，以調整中心內容的大小。 如何使用材料ui做到這一點？

Answer 1

我希望您在這里共享代碼以便我們可以進行處理，但是從文檔開始，您的解決方案是一個持久的抽屜，其內容根據抽屜狀態而變化， 在此處進行了記錄 （如果需要，還可以在codeandbox中進行記錄）弄亂它）

為了使任何內容都具有“響應性”（例如，根據屏幕尺寸更改其外觀），您可以使用這種形式的注釋：

appBar: {
    marginLeft: drawerWidth,
    [theme.breakpoints.up('sm')]: {
      width: `calc(100% - ${drawerWidth}px)`,
    },
  },

menuButton: {
    marginRight: 20,
    [theme.breakpoints.up('sm')]: {
      display: 'none',
    },
  }, 

簡而言之，如果應用程序在“ sm”（小）窗口中運行，它將應用您在{}內提供的樣式，因此在此示例中，標頭的寬度將為calc(100% - ${drawerWidth}px)將顯示抽屜calc(100% - ${drawerWidth}px)和菜單按鈕以打開抽屜。

您可以將此技術應用於文檔中的持久抽屜式代碼，以獲取所需的信息。 再次，如果您嘗試但無法使它正常工作，我很樂意使用您的代碼。