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

[system] Use a custom sheet to set prepend for GlobalStyles #43632

Merged
merged 4 commits into from
Sep 11, 2024
Merged

[system] Use a custom sheet to set prepend for GlobalStyles #43632

merged 4 commits into from
Sep 11, 2024

Conversation

siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Sep 6, 2024 •
edited
Loading

closes #43482

Root cause

Emotion does not pass prepend in GlobalStyles, see https://github.com/emotion-js/emotion/blob/main/packages/react/src/global.js#L94-L99, so the global CSS always inject at the end of head for client-side apps.

This PR create a custom sheet that will preserve the prepend flag.

Before: The text is blue index.css cannot override even using <StyledEngineProvider injectFirst>, see sandbox

After: The text is now red due to index.css overrides, see sandbox

image

@siriwatknp siriwatknp added package: system Specific to @mui/system customization: theme Centered around the theming features labels Sep 6, 2024
@mui-bot
Copy link

mui-bot commented Sep 6, 2024 •
edited
Loading

Netlify deploy preview

https://deploy-preview-43632--material-ui.netlify.app/

@mui/joy: parsed: +0.06% , gzip: +0.08%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against b5b72c2

@siriwatknp siriwatknp mentioned this pull request Sep 6, 2024
Closed
@DiegoAndai
Copy link
Member

DiegoAndai commented Sep 6, 2024 •
edited
Loading

Thanks for working on this @siriwatknp!

Emotion does not pass prepend in GlobalStyles, see https://github.com/emotion-js/emotion/blob/main/packages/react/src/global.js#L94-L99, so the global CSS always inject at the end of head for client-side apps.

Does this mean that injectFirst never worked? Or is this a special case? In the CSS injection order section of our docs we use use prepend: true, is that not working either?

Emotion does not pass prepend in GlobalStyles

I agree with you that we should fix it on our side, but let's also create an issue in Emotion's repo to see if this is a bug on their side that they can eventually fix. We shouldn't wait for it, but if they eventually fix it we can simplify our implementation.

@siriwatknp
Copy link
Member Author

Does this mean that injectFirst never worked?

Yes and No, it works with styled but not GlobalStyles.

@siriwatknp
Copy link
Member Author

I agree with you that we should fix it on our side, but let's also create an issue in Emotion's repo to see if this is a bug on their side that they can eventually fix. We shouldn't wait for it, but if they eventually fix it we can simplify our implementation.

The issue is already there emotion-js/emotion#2790 (I put a comment here)

@siriwatknp @DiegoAndai
Update packages/mui-styled-engine/src/StyledEngineProvider/StyledEngi…
3cd2946 
…neProvider.js

Co-authored-by: Diego Andai <diego@mui.com>
Signed-off-by: Siriwat K <siriwatkunaporn@gmail.com>
@siriwatknp siriwatknp enabled auto-merge (squash) September 10, 2024 03:23
@siriwatknp siriwatknp merged commit da163f0 into mui:master Sep 11, 2024
19 checks passed
This was referenced Sep 11, 2024
Merged
Open
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@DiegoAndai DiegoAndai DiegoAndai approved these changes

@mnajdova mnajdova Awaiting requested review from mnajdova

Assignees
No one assigned
Labels
customization: theme Centered around the theming features package: system Specific to @mui/system
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

CSS Variables Being Overridden After Page Load
3 participants
@siriwatknp @mui-bot @DiegoAndai