React Bileşenlerini CSS ile Stillendirme

Bir dizi teknik kullanarak React uygulamalarınızı ve sayfalarınızı şekillendirebilirsiniz. Bunların en kolayı bir React bileşen kitaplığı indirmek olacaktır. Ancak kitaplıkları kullanırken bile er ya da geç özel stiller eklemeniz gerekecektir. Peki, bunu yapmanın en iyi yolu nedir?

Küçük ölçekli projeler için, Satır içi stilleri , Modülleri kullanarak veya className özelliklerini kendiniz yazarak uygulamanızın stilini rahatça oluşturabilirsiniz. Uygulamalar gibi dinamik projeler için, sahne öğelerini kolayca uygulamanıza olanak tanıyan bir kitaplık kullanmak daha iyidir.

Alternatif olarak, önceden oluşturulmuş stiller ile birlikte gelen Tailwind UI gibi bir yardımcı program seti kullanabilirsiniz. Bir maket veya sunum oluşturmanız gerekiyorsa, React-dostu UI kitleri gitmenin yoludur.

className ile pratik stil

React'te pratik CSS stilleri className özelliği aracılığıyla uygulanır.

Bu aynı zamanda projeniz için bir stil sayfası kullanmaya eşdeğerdir. React, bileşen yapısı tarafından yönlendirildiğinden, stil sayfalarınızı yalnızca belirli ihtiyaçlar için içe aktarabilirsiniz.

Bir örneğe bakalım.

App.css

 .CSS-span { display: inline-block; transform: rotate(-1deg); position: relative; color: #fff; background-color: #dd9662; padding: 1px 5px 1px 5px; border-radius: 5px; }

App.js

 import './app.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> How to Style React Components with <span className="CSS-span">CSS</span> </p> </header> </div> ); }

Ve bu sonuç olurdu:

Tamamen geçerli bir vanilya tekniğidir. Ve, çoğunlukla, temel bileşenler arasında yeniden kullanacağınız global değişkenleri bildirmek için kullanılır.

Tek uyarı, projeniz büyüdükçe, adlandırma çatışmaları potansiyelinin de artmasıdır.

Aynı şekilde, yüzlerce stil sayfasını yönetmenin verimlilik maliyeti de çok yüksek.

Satır İçi Stiller için JSX Kullanma

React, satır içi stilleri kullanarak DOM öğelerine stil vermenizi sağlar. CSS mantığı aynı kalırken, stilin kendisinin JavaScript'ten geçmesi gerekir. Bu aynı zamanda JSX olarak da bilinir.

Bir örneğe bakalım:

Headline.js

 function Headline(){ const headlineStyle = { backgroundColor: "#fff", lineHeight: "1.5", height: "2rem", border: "none", color: "black" } return ( <div style= { headlineStyle } > <h2>Headline title</h2> <p>the sub-headline</p> </div> ) }

Dikkat edeceğiniz bir şey, line-height yazmak yerine lineHeight kullanmamızdır.

Bunun açıklaması şudur: "JSX, JavaScript'e HTML'den daha yakın olduğundan, React DOM, HTML öznitelik adları yerine camelCase özellik adlandırma kuralını kullanır." .

Satır içi stiller genellikle örnekleri sergilemek için kullanılır, aynı zamanda belirli öğelere dinamik stil eklemek için de kullanılır. Ayrıca, satır içi stiller sözde öğeleri veya medya sorgularını desteklemez, çünkü yalnızca style öğesini iletebilirsiniz. Bir stil sayfası kullanmak daha iyi bir alternatiftir.

CSS Modülleri ile yerel kapsam oluşturma

Çarpışmaları adlandırmadan bileşenlere özel stiller uygulamak istiyorsanız, bunu yapmanın bir yolu CSS Modülleridir.

Bu, yerel kapsamı her bir bileşene ayrı ayrı uygulayabileceğiniz bir yaklaşımdır.

Şöyle:

Header.module.css

 .container { width: 1280px; margin: 1rem auto; padding: 1rem; } .header { background-color: #ffffff; color: #000000; font-weight: 700; }

Header.js

 import styles from './Header.module.css'; function Header() { return ( <div className={styles.container}> <h2 className={styles.header}>Using CSS Modules in React</h2> </div> ); }

Aynı mantığı iki kez yeniden yazma gereğini ortadan kaldırarak, başka bir stil sayfasından belirli bir stili çağırdığınız kompozisyon gibi şeyler de yapabilirsiniz.

 .header { composes: header from './style.css'; }

JS'de CSS

Vue ve Svelte gibi çerçevelerin aksine, React kendi stil arabirimini sağlamaz.

Bu nedenle, yukarıda belirtilen yöntemleri kullanarak bileşenler için CSS yazabilirsiniz, ancak kutsal kase yaklaşımı, JS kitaplıklarında CSS kullanmaktır. Her kütüphanenin güçlü ve zayıf yönleri vardır, ancak genel olarak faydaları aynı kalır:

• Çeşitli stil varyasyonları için aksesuarlar.
• Erişilebilir tema.
• Bileşen tabanlı stil kapsamı.
• JavaScript işlevlerini kullanan dinamik CSS değişkenleri.

JS'de CSS için en popüler çözüm Styled Components'tır.

Ve diğer dikkate değer seçenekler arasında Emotion ve Linaria yer alıyor. Demo için, CSS'nin Styled Components kitaplığını kullanarak bir React bileşenine nasıl entegre edildiğine bakalım.

StyledComponents.js

 import styled from 'styled-components'; const HeaderWrapper = styled.section` padding: 4em; background: orange; `; const HeaderTitle = styled.h2` font-size: 2rem; text-align: center; color: black; `; <HeaderWrapper> <HeaderTitle>Example of creating a React component with Styled Components.</HeaderTitle> </HeaderWrapper>

İlk olarak, başlık başlığımız için bir <section> kapsayıcısı oluşturacak HeaderWrapper adında yeni bir bileşen oluşturuyoruz. Daha sonra HeaderTitle adında başka bir bileşen oluşturuyoruz ve buna CSS değişkenlerini iletiyoruz. Yani, bir bakıma bu, Web Bileşenleri ile çalışmakla tamamen aynıdır, sadece React bağlamında.

CSS Çerçevesi Kullanmak

Ön uçtaki her şey çerçevelere ve kitaplıklara doğru ilerlemiyor.

Daha çok, bir projeye sıfırdan başlamanın verimsiz olduğu gerçeğiyle ilgilidir. Tailwind CSS gibi bir çerçeve, tüm uygulama yapılarınızı sıfırdan yazma ihtiyacını hafifletmeye yardımcı olur. Tailwind CSS'nin çalışma şekli, çerçevenin önceden belirlenmiş yardımcı sınıflar sağlaması ve bağımsız CSS yazmanıza gerek kalmadan bir düzen yapılandırmanıza izin vermesidir.

TailwindCSSApp.js

 function Header() { return ( <div className="container mx-auto bg-gray-500 rounded-xl shadow border p-8 m-10"> <p className="text-3xl text-black-700 font-bold mb-5"> Tailwind CSS with React </p> <p className="text-black-300 text-lg"> All styling defined with utility classes </p> </div> ); } export default Header;

Bu nedenle, bileşen stilini Constants kullanarak tanımlamak yerine, stili çerçeve tarafından belirtilen şekilde doğrudan yazabiliriz. Bunun gibi bir yöntem son derece verimlidir ve örneğin başkaları tarafından yapılan UI bileşenlerini (kartlar gibi) içe aktarabilirsiniz.

Tailwind CSS, snippet'leri doğrudan kopyalayıp yapıştırabileceğiniz ve herhangi bir sonuç olmadan uygulama tasarımınızda kullanabileceğiniz için özellikle popülerdir.

Bir UI Kitaplığı Kullanma

React bileşenlerini şekillendirmenin son yöntemi, bir UI kitaplığı kullanmaktır. Bir çerçeveden farklı olarak, bir UI kitaplığı stil yönergelerini takip eder. Bu nedenle, birçok yönden, önceden belirlenmiş bir stil ile birlikte gelir. Mantine ve Material UI'nin beğenileri, tercih edilen seçeneklerden bazıları.

Tek "dezavantajı", o belirli kütüphaneyi öğrenmek için zamanınızın birazını harcamanız gerektiğidir. Ancak aynı şey çerçeveler için de söylenebilir. Giriş engeline rağmen, hem CSS çerçeveleri hem de UI kitaplıkları, React bileşenlerini şekillendirmede altın standarttır.