search

JedWatson / react-select

The Select Component for React.js
https://react-select.com/
MIT License
27.49k stars 4.12k forks source link

react select style not applied #5710

Open iChwn opened 1 year ago

iChwn commented 1 year ago

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?

image

Mat-moran commented 1 year ago

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.

imagen

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 commented 10 months ago

Also having this issue with shadcn + remix

shahzaib-manzoor commented 7 months ago

image

same issue with remix

honia19 commented 6 months ago

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

Screenshot 2024-01-25 at 20 30 31
honia19 commented 6 months ago

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 commented 5 months ago

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 image

Client side re-render image

arman-mukatov commented 3 months ago

Π― исправил ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ зависимостСй (локально ΠΈ послС развСртывания Ρƒ мСня Π½Π΅Ρ‚ ошибки, ΠΊΠΎΠ³Π΄Π° стили Π½Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ)

    "@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 commented 3 months ago

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 image

Client side re-render image

how to solve this bug?

NettaB commented 3 months ago

Has anyone managed to solve this?

iChwn commented 3 months ago

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 commented 3 weeks ago

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