logo

TechCodeview

React'ta Satır İçi Stil

giriiş

Nadiren tek sayfalık bir uygulama gerektiren ön uç projelerinde, DOM öğelerinin satır içi stilleri genellikle hedef öğenin >' özelliği.

Ancak React'te satır içi stillendirme konusunda işler oldukça farklı. Bu kılavuz, Kullanıcı Profili Kartı bileşeni oluşturmanın gerçek dünyadan bir örneğini kullanarak bunu başarmaya odaklanmaktadır.

React'ta Bileşenleri Şekillendirme

Harici bir stil sayfasıyla birlikte classname niteliğini kullanarak React bileşenlerini stillendirmenin normal yolunu zaten biliyor olabilirsiniz:

 import React from &apos;react&apos; import &apos;./style.css&apos; function myComponent(){ return( return <p classname="paragraph-text">ClassName Styled Text</p> ) }

jsx 

 paragraph-text{ font-weight: bold; color: beige; }

CSS

Satır İçi Stiller

Satır içi stillerle aynı sonucu elde etmek oldukça farklı çalışır. React'ta satır içi stilleri kullanmak için, camel özelliklerine sahip bir JavaScript nesnesini kabul eden style niteliğini kullanın. Örnek:

 function MyComponent(){ return Inline Styled Component }

React bir birim eklediğinden dolgu değerinin bir birimi olmadığını unutmayın. 'px ' bazı sayısal satır içi stil özelliklerine son ek. 'Em' veya 'rem' gibi diğer birimleri kullanmanız gerektiği durumlarda, değeri bir dize olarak açıkça belirtin. Bunu padding özelliğine uygulamak padding olmalıdır: '1.5ay' .

Ayrıca, bu stillere otomatik olarak satıcı öneki eklenmez, dolayısıyla satıcı öneklerini manuel olarak eklemeniz gerekir.

Okunabilirliği Artırın

Stiller çok fazla olursa ve her şey hantallaşırsa MyComponent'in okunabilirliği önemli ölçüde düşer. Aşağıda gösterildiği gibi stiller yalnızca nesneler olduğundan bileşenden kaldırılabilirler.

 const myComponentStyle = { color: &apos;blue&apos;, lineHeight: 10, padding: &apos;1.5em&apos;, } function MyComponent(){ return Inline Styled Component }

jsx

Kart Bileşeni Oluşturma

Kullanıcı kartı bileşenini oluşturalım.

 const cardStyles = { container: { display: &apos;flex&apos;, height: 100, width: 400, boxShadow: &apos;0 0 3px 2px #cec7c759&apos;, alignItems: &apos;center&apos;, padding: 20, borderRadius: 20, }, profilePicture: { display: &apos;flex&apos;, justifyContent: &apos;center&apos;, alignItems: &apos;center&apos;, backgroundColor: &apos;orange&apos;, color: &apos;white&apos;, height: 20, width: 20, borderRadius: &apos;50%&apos;, padding: 10, fontWeight: &apos;bold&apos;, }, bio: { marginLeft: 10, }, userName: { fontWeight: &apos;bold&apos;, }, }; function userCardComponent(){ <span style="{cardStyles.profilePicture}">D</span> <p style="{cardStyles.userName}">Desmond Nyamador</p> <p>I just learned an easy way to style React Components</p> }

Temel Kural

Resmi React dokümantasyonu, projeleri şekillendirmenin birincil yolu olarak satır içi stilin kullanılmasından bahseder ve bunun yerine className niteliğinin kullanılmasını önerir.

Not Belgelerdeki bazı örneklerde kolaylık sağlamak amacıyla bir stil kullanılır, ancak stil özelliğinin stil öğelerinin birincil aracı olarak kullanılması genellikle önerilmez.

Çoğu durumda, sınıf adı s, harici bir CSS stil sayfasında tanımlanan sınıflara atıfta bulunmalıdır. Stiller genellikle React uygulamalarında, oluşturma sırasında dinamik olarak hesaplanan stiller eklemek için kullanılır.