react select style not applied

[iChwn]

I have an issue when trying to use react-select on my Remix project, the styles are not loaded in remix js, any suggestions to fix this issue?

[Mat-moran]

I am having the same issue with remix and shadcn ui library in my stack.

It does not happen on all the routes, only in certain routes it make me think that depends on the CSS styles in the parent routes but I am not able to debug it properly to find where the error came from. Also I thought that was a problem using Radix library and react-select library but I try in a clean page with both components and works fine.

When I press F5 an refresh the page there is a second where the styles are ok, you can see in the video.

https://github.com/JedWatson/react-select/assets/4810013/979cb1b9-beef-409a-9c73-b4a6a38da966

I am becoming crazy, any idea of how to debug it? 😄

[mildrenben]

Also having this issue with shadcn + remix

[shahzaib-manzoor]

same issue with remix

[honia19]

I have the same issue on Ruby on Rails monolith. I use latest version (5.8.0), v4 works fine

[honia19]

I fixed an issue when I downloaded dependencies (locally and after deployment I don't have a bug when styles are not applied)

    "@emotion/css": "^11.11.2",
    "@emotion/server": "^11.11.0",

My configuration is

    "@emotion/css": "^11.11.2",
    "@emotion/react": "^11.11.3",
    "@emotion/server": "^11.11.0",
    "@emotion/styled": "^11.11.0",

Maybe it will be helpful for someone.

[Idono87]

Reproduced the problem with remix. Seems like emotion style tags aren't being created with the initial SSR call. A client side re-render will create the style tags.

SSR

Client side re-render

[arman-mukatov]

Я исправил проблему при загрузке зависимостей (локально и после развертывания у меня нет ошибки, когда стили не применяются)

    "@emotion/css": "^11.11.2",
    "@emotion/server": "^11.11.0",

Моя конфигурация

    "@emotion/css": "^11.11.2",
    "@emotion/react": "^11.11.3",
    "@emotion/server": "^11.11.0",
    "@emotion/styled": "^11.11.0",

Возможно, это будет полезно для кого-то.

not working

[arman-mukatov]

Reproduced the problem with remix. Seems like emotion style tags aren't being created with the initial SSR call. A client side re-render will create the style tags.

SSR

Client side re-render

how to solve this bug?

[NettaB]

Has anyone managed to solve this?

[iChwn]

Has anyone managed to solve this?

Unfortunately no 😬, I inject the react select style with custom css to force fix this issue, it's not the good idea, but this little bit fix the broken style

[TheAlexPorter]

I managed to resolve the issue by adding a CacheProvider from emotion into my remix app. Maybe that will help you too 👍 You can see the code here https://github.com/JedWatson/react-select/issues/5937#issuecomment-2251499031.

cc @iChwn @NettaB @arman-mukatov @Idono87 @shahzaib-manzoor @mildrenben @Mat-moran