Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs] Missing body styles from CssBaseline in light mode #24970

Closed
eps1lon opened this issue Feb 16, 2021 · 4 comments · Fixed by #25855
Closed

[docs] Missing body styles from CssBaseline in light mode #24970

eps1lon opened this issue Feb 16, 2021 · 4 comments · Fixed by #25855
Labels
bug 🐛 Something doesn't work docs Improvements or additions to the documentation package: styled-engine Specific to @mui/styled-engine priority: important This change can make a difference
Milestone
v5-beta

Comments

@eps1lon
Copy link
Member

eps1lon commented Feb 16, 2021

Current Behavior 😯

The clock of the TimePicker has the default browser font.
The global <body> styles responsible for e.g. font-family are missing in the production build of our docs in light mode.

Expected Behavior 🤔

Global <body> styles should not be missing to render the correct font of the TimePicker

Steps to Reproduce 🕹

Steps:

  1. goto https://next--material-ui.netlify.app/components/time-picker/#basic-usage
  2. click on the clock icon to open the picker

Context 🔦

When doing client-side rendering it seems to work for dev and prod environments (dev: https://codesandbox.io/s/missing-body-styles-in-cssbaseline-bg7u9, prod: https://csb-bg7u9-adtydwa76.vercel.app).
But for our docs it's only working in dev but not prod.

Your Environment 🌎

Using Chrome

`npx @material-ui/envinfo` 
System:
    OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
  Binaries:
    Node: 12.20.0 - ~/.nvm/versions/node/v12.20.0/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v12.20.0/bin/npm
  Browsers:
    Chrome: 88.0.4324.150
    Firefox: 85.0.1
  npmPackages:
    @emotion/react: ^11.0.0 => 11.1.5 
    @emotion/styled: ^11.0.0 => 11.1.5 
    @material-ui/codemod:  5.0.0-alpha.24 
    @material-ui/core:  5.0.0-alpha.25 
    @material-ui/data-grid:  4.0.0-alpha.19 
    @material-ui/docs:  5.0.0-alpha.25 
    @material-ui/envinfo:  1.1.6 
    @material-ui/icons:  5.0.0-alpha.24 
    @material-ui/lab:  5.0.0-alpha.25 
    @material-ui/styled-engine:  5.0.0-alpha.25 
    @material-ui/styled-engine-sc:  5.0.0-alpha.25 
    @material-ui/styles:  5.0.0-alpha.25 
    @material-ui/system:  5.0.0-alpha.25 
    @material-ui/types:  5.1.7 
    @material-ui/unstyled:  5.0.0-alpha.25 
    @material-ui/utils:  5.0.0-alpha.25 
    @types/react: ^17.0.0 => 17.0.2 
    react: ^16.14.0 => 16.14.0 
    react-dom: ^16.14.0 => 16.14.0 
    styled-components:  5.2.1 
    typescript: ^4.1.2 => 4.1.5
@eps1lon eps1lon added bug 🐛 Something doesn't work docs Improvements or additions to the documentation labels Feb 16, 2021
@oliviertassinari
Copy link
Member

oliviertassinari commented Feb 16, 2021 •
edited
Loading

@eps1lon Thanks for opening an issue. I had noticed it too. It's really weird. It might be related to: emotion-js/emotion#2158.

@oliviertassinari
Copy link
Member

oliviertassinari commented Feb 16, 2021 •
edited
Loading

On are related note, so far, we have authored the components to be able to live on a page in isolation. How about we update the TimePicker to apply the font from the palette regardless of the CSS cascading from the body?

@eps1lon
Copy link
Member Author

eps1lon commented Feb 16, 2021

On are related note, so far, we have authored the components to be able to live on a page in isolation. How about we update the TimePicker to apply the font from the palette regardless of the CSS cascading from the body?

I agree. I'm working on some rudimentary visual regression tests that would cover this and after we've fixed the behavioral bugs I'm fixing the visual ones.

Though it would be interesting to know in what capacity we actually rely on CssBaseline.

@eps1lon eps1lon mentioned this issue Feb 17, 2021
Closed
@oliviertassinari oliviertassinari added the priority: important This change can make a difference label Feb 21, 2021
@oliviertassinari oliviertassinari mentioned this issue Mar 4, 2021
Merged
1 task
@oliviertassinari oliviertassinari mentioned this issue Mar 22, 2021
Closed
2 tasks
@eps1lon eps1lon added this to the v5-beta milestone Apr 5, 2021
@oliviertassinari oliviertassinari added the package: styled-engine Specific to @mui/styled-engine label Apr 17, 2021
@oliviertassinari
Copy link
Member

The issue was open on Feb 16, the release of the Feb 27 (alpha.26) shows the issue:

Screenshot 2021-04-24 at 17 50 37

https://603a922dd30a69000806c3b8--material-ui-docs.netlify.app/components/time-picker/#basic-usage

Since Ap 12 (alpha.30) I can no longer see the issue:

Screenshot 2021-04-24 at 17 51 53

https://60741836308f300007131b7a--material-ui-docs.netlify.app/components/time-picker/#basic-usage

I can't explain why. However, @mnajdova fixed the root cause in #25855

@oliviertassinari oliviertassinari mentioned this issue Apr 24, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug 🐛 Something doesn't work docs Improvements or additions to the documentation package: styled-engine Specific to @mui/styled-engine priority: important This change can make a difference
Projects
None yet
Milestone
v5-beta
Development

Successfully merging a pull request may close this issue.

[docs] Fix global styles leaking on different pages mnajdova/material-ui
2 participants
@oliviertassinari @eps1lon