reactjs - 如何使用 Material-UI v5 设计抽屉样式

Question

在 Material-UI v4 中，Drawer 组件可以这样设置样式:

<Drawer
  variant="persistent"
  classes={{paper: myClassNameHere}}
>

其中 myClassNameHere 由 useStyles 生成，后者又由 makeStyles 生成。

迁移到 v5 的样式解决方案被证明对这个组件特别棘手，因为样式需要应用于内部 Paper 子组件而不是主要的 Drawer 组件本身。

此时甚至可以使用新解决方案设置 Drawer 的样式吗？

Answer 1

你可以像这样将你的样式文件传递给抽屉

import styled from "styled-components";
const MyPaper = styled.div`
  //Put your styles here.
`;

const MyDrawer = () => {
  return (
    <Drawer
       PaperProps={{ component : MyPaper }}
    >
      // drawer content
    </Drawer>
  )
}

或者您实际上可以将样式化的 div 传递给抽屉(因为纸张本身显示 flex，请记住传递 flex:1 来填充空间)

const MyPaper = styled.div`
  flex:1;
`;

 const MyDrawer = () => {
   return (
      <Drawer>
        <MyPaper>
          My Content
        </MyPaper>
      </Drawer>
    )
  }