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

[wouter-leistra]

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]

@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]

@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]

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

[mnajdova]

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]

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]

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]

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).

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@wouter-leistra How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.