search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.18k stars 32.08k forks source link

[DatePicker] How to style the popper/dialog with styled (emotion)? #26767

Open wouter-leistra opened 3 years ago

wouter-leistra commented 3 years ago

I've been going through the docs of emotion/styled as well as next.material-ui.com, but I can't find a way to style the dialogs/poppers and their contents. On the docs there is also no styles table for DatePicker API, which complicates things further.

I'm using the v5.0.0-alpha.36 packages for core and lab. Any advice is greatly appreciated.

In the sandbox link below you see that we have a customized theme that adds 4 colors to the palette. But the main question is how to style the popper/dialog with styled, datePicker components do not seem to support classes and therefore the example on how to style portals does not seem to work.

Sandbox: https://codesandbox.io/s/suspicious-montalcini-k3nhy

mnajdova commented 3 years ago

@wouter-leistra what do you mean by

in a working way that also Typescript agrees with.

? Please provide a codesandbox that illustrates what is the problem.

wouter-leistra commented 3 years ago

@wouter-leistra what do you mean by

in a working way that also Typescript agrees with.

? Please provide a codesandbox that illustrates what is the problem.

Sorry, added the sandbox that illustrates our situation.

wouter-leistra commented 3 years ago

@mnajdova i updated the ticket... I'm still eager to learn how to do this on the datepicker...

mnajdova commented 3 years ago

Ah, I see your confusion now. This should help you - https://next.material-ui.com/guides/interoperability/#portals Here is a dirty POC codesandbox - https://codesandbox.io/s/focused-fermi-sjcs1?file=/src/App.tsx When component uses portal inside, usually we recommend forwarding the className coming from styled to the portal element.

mnajdova commented 3 years ago

There is a potential in improving the docs around this. Leaving the issue with docs label, so we can address this in the future.

smmccabe commented 2 years ago

Is there a reason components that use portals can't just automatically forward the classname? I was debugging a tooltip (uses popper) and it took quite a while to figure out what was going wrong and then find the appropriate docs.

mnajdova commented 2 years ago

The classes are forwarded to the children inside the portal component, so that it would be consistent with the other components (in terms the class name being applied on the root element in the react tree).