-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
Styles not Loading in Remix #5937
Comments
I'm in the same boat. There are a few similar issues open. I'm going to attempt the solution here in #3309 (comment) and see if by making each component with my own styles manually applied I can get past the issue. Others: |
Update: I tried the method here where you add an emotion provider and that did the trick! Wrapping my app with a I don't like that I had to add an extra provider for styling I'm not using directly, but this beats the pain of having to migrate away from react-select. Here is the snippet from my remix app: // root.tsx
import createCache from '@emotion/cache'
import { CacheProvider } from '@emotion/react'
function AppWithProviders() {
const data = useLoaderData<typeof loader>()
const cache = createCache({
key: 'test',
prepend: false,
})
return (
<HoneypotProvider {...data.honeyProps}>
<CacheProvider value={cache}>
<UserDataProvider
data={{
user: data.user,
theme: data.requestInfo.userPrefs.theme,
}}
>
<App />
</UserDataProvider>
</CacheProvider>
</HoneypotProvider>
)
} From this Isssue: #3680 (comment) I hope this helps! |
Hey @TheAlexPorter - thanks so much for that - I did try wrapping the whole root of my app in an emotion provider and it didn't seem to have any effect. Is there anything else that you had to do to make this work? Do I have to consume the provider somewhere? |
I don't do anything other than wrap my app with the cache provider 🤔 The only other thing I did before attempting these solutions was upgrade react to 18.3.1 and remix-run to 2.10.3 |
Same problem here with Astro JS (strangely, it's working well in my Remix projects), when using Astro with ViewTransitions component in the page layout headers, styles of react-select are broken when navigating to another page and going back to the page where react-select is called |
Hi There - I'm sorry, I'm not sure how to replicate this in your code sandbox. I have a suspicion that this somehow relates to Remix and SSR, but can't get to the root of it.
Basically, the form, doesn't display properly. If you change something in code, and dev mode reloads the page, then everything shows correctly. If you do an actual browser load or refresh, the form styles don't load correctly.
Based on my research, I have tried waiting for hydration, and I've tried using a useEffect to make sure it only loads in the client to separate from SSR, but neither works.
This is the controlled form field that I'm rendering:
The text was updated successfully, but these errors were encountered: