[Drawer] Provide prop PaperComponent

[maxkahnt]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Drawer should provide a prop to override PaperComponent (not only PaperProps) like, e.g. Dialog does.

Motivation 🔦

I occasionally need to wrap/replace the paper component.

[oliviertassinari]

Thanks for raising, interesting issue. We cover something similar in #23043, in theory, it's going to be solved with #21453, we have started to account for in the development of v5.

[maxkahnt]

Yeah, that looks like a big chunk of work ;). What would be a good way to work around it for now?
I can see the following three options:

1. Use Dialog instead and style it according to my needs. I can override PaperComponent and PaperProps there.
2. Manually one-time override all styling of paper and nest a component that suits my needs.
3. Create a local copy of the Drawer implementation and hardcode-replace paper with my component.

I favor 2 as it seems to be the simplest given my current knowledge level in react, material-ui and jsx etc. in general. It generates minor css/nesting overhead. 1 would keep me within the framework entirely, but drop semantics. It probably also involves a decent amount of style overrides. 3 would probably be cleanest, but having had a quick look at the source I am not confident that hard replacing the component is all that straighforward, or is it? Is there an (maybe easier) option I overlooked?

[oliviertassinari]

@maxkahnt You can customize the CSS of the Paper to reset the style and render your own as a child (2.), the simpler and safer.

[oliviertassinari]

Closing for #21453