⊗jsrtPmSyStC 103 of 112 menu

Styled Components ile React'ta Stilleme

Önceki derslerde, global CSS ve inline stil kullanımını ele aldık. Bu derste, daha büyük uygulamalar için daha etkili bir yöntem olan styled-components kütüphanesini kullanacağız.

Şimdi, önceki derslerde kullandığımız CSS stilleri olmayan bileşenimizi alalım:

function App() { return ( <div> <p>text</p> <p>text</p> <p>text</p> </div> ); }

Öncelikle Styled Components kütüphanesini kuralım:

npm install --save styled-components

Ardından, App bileşenine gerekli paketi içe aktaralım:

import styled from 'styled-components';

Artık etiketleri stillere sarabilir ve bunları doğrudan JS içine yerleştirilmiş stillerle React bileşenleri olarak kullanabiliriz. Bu yaklaşıma CSS in JS da denir.

İlk paragrafı stilleyelim. Bunun için, App fonksiyonundan önce, içe aktarma satırlarından sonra, Text1 bileşenini oluşturalım. Kütüphanedeki styled nesnesinden bir paragrafa ihtiyacımız var, bu yüzden styled.p yazıyoruz. Ardından, şablon dizesi içinde, normal CSS'de olduğu gibi, ihtiyacımız olan CSS stillerini listeliyoruz:

const Text1 = styled.p` color: orangered; font-weight: bold; `;

Gördüğünüz gibi, burada şablon dizeleri şeklinde saf CSS kullanıyoruz, bu da çok kullanışlıdır. Benzer şekilde, medya sorgularını, sözde öğeleri, seçicileri ve diğer CSS işlevlerini kullanabiliriz.

Şimdi, App bileşen fonksiyonunun içinde, p etiketini, oluşturduğumuz Text1 bileşeni ile değiştirelim:

<Text1>text</Text1>

Benzer şekilde, ikinci ve üçüncü paragrafları stilleyelim. Bunun için Text2 ve Text3 bileşenlerini oluşturalım:

const Text2 = styled.p` font-style: italic; color: brown; `; const Text3 = styled.p` background-color: orange; font-weight: bold; color: white; `;

Son olarak, div'imizi stilleyelim. Bunun için bir bileşen oluşturalım ve adını Container koyalım:

const Container = styled.div` width: 200px; border: 2px solid brown; padding: 10px; text-align: center; `;

Tüm etiketlerimizi oluşturulan bileşenlerle değiştirelim:

import styled from "styled-components"; const Container = styled.div` width: 200px; border: 2px solid brown; padding: 10px; text-align: center; `; const Text1 = styled.p` color: orangered; font-weight: bold; `; const Text2 = styled.p` font-style: italic; color: brown; `; const Text3 = styled.p` background-color: orange; font-weight: bold; color: white; `; function App() { return ( <Container> <Text1>text</Text1> <Text2>text</Text2> <Text3>text</Text3> </Container> ); }

Bu yaklaşım sayesinde, stilleri olan tekrar kullanılabilir bileşenler oluşturulabilir.

Oluşturulan HTML'i tarayıcıdaki geliştirici paneline açarsanız, her bileşenin kendi benzersiz sınıflarına sahip olduğunu göreceksiniz. Böylece, artık ayrı bileşenlerin sınıfları arasındaki çakışmalar konusunda endişelenmemize gerek kalmaz.

Benzer şekilde, örneğin Emotion kütüphanesini kullanarak da bileşenler stilenebilir.

Bir önceki dersteki alıştırmada yaptığınız React bileşenini alın ve Styled Components kütüphanesini kullanarak stilleyin.

Türkçe
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenЎзбекOʻzbekTiếng Việt
Web sitesinin çalışması, analiz ve kişiselleştirme için çerezleri kullanıyoruz. Veri işleme, Gizlilik Politikası'na uygun olarak gerçekleşir.
tümünü kabul et özelleştir reddet