React'te Style Niteliği Nasıl Kullanılır?

Şu anda arka rüzgarın tüm potansiyelini kullandığınızı ve belki de arka rüzgar öğelerini kullandığınızı ve hazır bileşenleri kopyalayıp yapıştırdığınızı varsayalım. Ben de çoğu zaman bunu yapıyorum ama öyle anlar oluyor ki... öylece CTRL+C ve CTRL+V'ye basamayız.

Stil özniteliğiyle tanışın, bunu özellikle arka rüzgarda bulacaksınız; bu, temel olarak, className üzerindeki satır içi stilin yanı sıra bileşenleriniz için gereken ek ayarlara benzer.

Stil genellikle arka plan rengi, arka plan resmi vb. eklemek için kullanılır. Daha fazlasını resmi tailwind belgelerinde bulabilirsiniz.https://tailwindcss.com/docs/background-attachment

Normalde böyle görünüyor.

Şimdi kodu kopyalayıp yapıştırırsak şöyle bir hata verecektir.

Şaşırtıcı olmayan bir şekilde tepki belgesinde de açıklanan, ancak bir nedenden dolayı tıpkı benim gibi gözden kaçıran stil için ek ayarlama gerektiriyor.https://reactjs.org/docs/dom-elements.html#style

Yani TLDR, arka plan rengi gibi basitçe hypen kullanamayız, onu camelCased olarak backgroundColor olarak değiştirmemiz gerekir.

arka plan renginden BackgroundColor'a,

background-position - backgroundPosition

background-image to backgroundImage

ve sadece bu değil, aynı zamanda tüm stili kapsayan alıntıyı kaldırmamız, onu çift kaşlı ayraçlarla değiştirmemiz ve değeri bunun gibi tırnak içine almamız gerekiyor.

Bu kadar! Başka bir şey yapmamıza gerek yok. Şimdi kod mükemmel çalışacak. Artık projemde böyle görünüyor, sadece tailwind öğelerinden kodu kopyalayıp yapıştırarak. (gerçekten tavsiye ederim,https://tailwind-elements.com/)

İyi eğlenceler! Okuduğunuz için teşekkürler!