Material-ui 容器内的抽屉

Question

How to set material-ui drawer inside a container in reactjs?

I wrapped my app page in container with 600px max width. I would like to set the drawer to start into that container not in the body page ( picture ). I am using app bar position as absolute to implement on scroll events, so would not like to change it.

Here is codesandbox example code: https://codesandbox.io/s/material-drawer-e6vrc?file=/header.js

I found a discussion about it here , but I did not figure out how to make it work in my example. From that I tried:

        ModalProps={{
          container: document.getElementById("appContainerDiv"),
          style: { position: "absolute" }
        }}

Answer 1

Ciao, consodering that you set drawerPaper with absolute position, I think the only thing you could do is set your style as:

drawerPaper: {
    minWidth: 100,
    width: "20%",
    position: "absolute",
    right: '12%',
    height: '75%',
  },

and the result will be:

note that this solution is not responsive!

Here your code modified.