MUI Drawer 樣式客製

總結

除了 Drawer 元件以外，Paper 也會被 Select 等 MUI 元件共用，不適合直接把樣式設定在 .MuiPaper-root 上；故在處理 Drawer 元件的外觀時，傳入額外的 className 來處理 Paper 在不同 Drawer 元件下的客製外觀

筆記

• classNames 作為 props 傳入元件中
• 樣式設定參考 gist 中 theme.drawer.tx 的內容
  • Drawer 元件的通用外觀（padding、字體顏色與 word-break）設定在 .MuiDrawer-paper 上
  • .MuiDrawer-root.small-drawer .MuiPaper-root 指定小型 Drawer 外觀
  • .MuiDrawer-root.big-drawer .MuiPaper-root 指定大型 Drawer 外觀

原始碼

參考文件

• MUI Drawer API: CSS