search

react-dates / react-dates

An easily internationalizable, mobile-friendly datepicker library for the web
https://react-dates.github.io/react-dates/
MIT License
12.23k stars 1.71k forks source link

Full screen portal styles not inherited from app #1717

Open jamstooks opened 5 years ago

jamstooks commented 5 years ago

react-dates version react-dates@20.2.4

Describe the bug When setting withFullScreenPortal to true, I'm finding that I'm getting a fall-back serif font.

I believe this is because the portal renders at the bottom of <body>. I'm using a css-in-js approach and my global styles are not available outside of the app rendered in <div className="App">.

Is this a bug or is there a way I should wrap the portal with my app's styles?

Source code (including props configuration)

https://codesandbox.io/s/react-dates-full-screen-portal-styles-36y6q

Screenshots/Gifs

Here, a full-screen portal show serif... Screenshot from 2019-07-01 13-38-21

while the vertical pop-over shows sans-serif: Screenshot from 2019-07-01 13-39-50

Desktop (please complete the following information):

markjaquith commented 4 years ago

I just encountered this as well. I'm using CSS-in-JS (styled-components). The same thing happens when using usePortal and useFullscreenPortal.

I don't think react-dates can do anything different here. The portal is outside of your app. It has to be. Otherwise your app could be apply styles that would prevent it from aligning properly on the screen.

You can solve this styling issue by having base styles that apply to body, or by targeting the react-dates portal specifically.

All I had to add (to my already prodigious react-dates CSS override file) was this:

.DateRangePicker_picker__portal {
    font-family: Roboto, sans-serif;
}