Uisng this as a reference I've created a collapsible drawer that shrinks the content area next to it. Here is the codesandbox. My question is how to add a smooth transition as in this example but not using styled. I tried with something like in the codesandbox, but it does weird things.

CodePudding user response：

What you want is Drawer variant persistent.

Change line #53 from this

variant={openDrawer ? "permanent" : "temporary"}

to this:

variant="persistent"

That's the only line I changed and it works really well now.