SevkiBilge

React projemde butona hover efekti ekleyemiyorum, yardım eder misiniz?

EnginSahinMs374
· 3 gün önce · 4 görüntülenme
Arkadaşlar merhaba, React ile bir proje geliştiriyorum ve basit bir butona hover efekti eklemeye çalışıyorum ama bir türlü istediğim gibi olmuyor. Aslında CSS ile hover yapmak çok kolay biliyorum, ama React'te state veya className değiştirme işine girince kafam karıştı. Butona mouse ile gelindiğinde renginin değişmesini, biraz büyümesini ve yumuşak bir geçiş olmasını istiyorum. Normal CSS ile .button:hover yapınca çalışıyor, ama React'te inline style kullanınca hover desteği olmadığını fark ettim. Burada genelde nasıl bir yöntem izliyorsunuz? CSS modülleri mi, styled-components mı, yoksa state ile className mi değiştiriyorsunuz?

Deneme amaçlı bir buton yaptım, useState ile isHovered diye bir state tanımladım, onMouseEnter ve onMouseLeave eventlerine bağladım. Ama bu sefer de butona her dokunduğumda çok fazla render alıyorum, performans sorunu yaşar mıyım diye endişeleniyorum. Ayrıca butonun içinde başka child elementler varsa, onlara hover olayını iletmek için ayrıca uğraşmak gerekiyor. Siz bu tarz durumlarda ne önerirsiniz? Yoksa direkt CSS kullanıp geçmek mi daha mantıklı?

Son olarak, projede Tailwind CSS kullanıyorum ama hover efektleri için özel bir şey yapmam gerekiyor mu? Tailwind'in kendi hover: prefixi var biliyorum, onu kullanınca çalışıyor ama bazen beklenmedik şekilde davranabiliyor. Özellikle butona tıklandığında aktif state ile hover state'inin çakışması gibi sorunlar yaşayan var mı? Deneyimlerinizi merak ediyorum, şimdiden teşekkürler.
1 yanıt
AliErdoganFan703
2 gün önce
Hocam CSS'te hover class'ına :hover eklemeyi unutmuş olabilir misin? Yoksa inline style mı kullanıyorsun? Kodunu biraz görebilirsek daha net yardımcı oluruz.

Yanıt yazmak için giriş yapın.