-
Notifications
You must be signed in to change notification settings - Fork 68
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.
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
Global styles component #62
Comments
Is there already a way to add global CSS? Or can you recommend a workaround? |
Hi @mhauens there isn't a good work around at the time unfortunately. We will be looking to implement this component in the next round of development (along side the ClassNames component, and keyframes api). If you needed something like global styles you could wrap your app in an |
@mhauens or anyone else interested - another alternative for global-ish styles atm (won't work for SSR, unless you implement something yourself) import { styled } from '@compiled/react';
import BodyClassName from 'react-body-classname';
export const DisableScroll = styled(BodyClassName)`
overflow: hidden;
`; When mounted will add class names to |
I worked on a spike here for the global component #462 a while back. There are a few things that make it difficult because we want to be able to extract everything to an external style sheet. If we want to be able to extract all CSS, how can we fundamentally support conditional global CSS? Aka, mount a component, styles are applied, unmount a component, styles are removed. The solution is obvious if its purely a runtime one. It is complicated by extracting. Even more so that we want to support a runtime to extracted story over the lifecycle of compiled components. Fundamentally the answer could simply be - don't have conditional global styles! Without thinking on names:
But the downside is One thing we could have in our tool belt is the conditionally render style What if we used The downside would be after extracting we'd need applications to have a provider or something to render these links when appropriate, as well as support SSR story. Realistically we'd need that anyway for critical CSS. Assuming we can still support the conditional CSS once extracted, we'd probably aim to have two style sheets:
|
This is something that Compiled won't currently be supporting. Closing to clean up the issue list. |
API
We will standardize on the
@emotion/react
API:Assumptions
Outstanding questions
@font-face
declarations to go through this component? Currently they can't be defined anywhere because it will blow up in prod modeThe text was updated successfully, but these errors were encountered: