Hepimiz standart yolu biliyoruz bir stil sayfasını bağlama için <head> bir HTML belgesinin değil mi? Bu, CSS yazabilmemizin birkaç yolundan sadece biri. Ancak, örneğin bir React projesinde, tek sayfalık bir uygulamada (SPA) şeylere stil vermek nasıl görünür?
Bir React uygulamasını şekillendirmenin birkaç yolu olduğu ortaya çıktı. Bazıları geleneksel stille örtüşüyor, diğerleri çok fazla değil. Ama bunu yapabileceğimiz tüm yolları sayalım.
Harici stil sayfalarını içe aktarma
Adından da anlaşılacağı gibi, React CSS dosyalarını içe aktarabilir. İşlem, CSS dosyasını HTML'de nasıl bağladığımıza benzer <head>:
- Proje dizininizde yeni bir CSS dosyası oluşturun.
- CSS yazın.
- React dosyasına aktarın.
Bunun gibi:
import "./style.css";Bu genellikle diğer içe aktarmaların gerçekleştiği dosyanın en üstüne gelir:
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;Bu örnekte, bir CSS dosyası bir App.js itibaren /Components/css klasör.
Satır içi stiller yaz
Satır içi stilin sürdürülebilirlik için o kadar da iyi olmadığını duymaya alışmış olabilirsiniz, ancak kesinlikle durumlar var (Işte bir tane!) nerede mantıklı. Ve bakım, React'te daha az sorun, çünkü CSS zaten zaten aynı dosyanın içinde oturuyor.
Bu, React'te satır içi stilin süper basit bir örneğidir:
<div className="main" style={{color:"red"}}>Yine de daha iyi bir yaklaşım, nesneleri kullanmaktır:
- İlk olarak, farklı öğeler için stiller içeren bir nesne oluşturun.
- Ardından, onu kullanarak bir öğeye ekleyin.
styleözniteliği ve ardından stil için özelliği seçin.
Bunu bağlamda görelim:
import { React } from "react";
function App() {
const styles = {
main: {
backgroundColor: "#f1f1f1",
width: "100%",
},
inputText: {
padding: "10px",
color: "red",
},
};
return (
<div className="main" style={styles.main}>
<input type="text" style={styles.inputText}></input>
</div>
);
}
export default App;Bu örnek bir styles biri için olmak üzere iki nesne daha içeren nesne .main class ve diğeri, harici bir stil sayfasında görmeyi beklediğimize benzer stil kuralları içeren bir metin girişi için. Bu nesneler daha sonra style döndürülen işaretlemedeki öğelerin özniteliği.
Stillere başvururken normalde düz HTML'de kullandığımız tırnak işaretleri yerine küme parantezlerinin kullanıldığını unutmayın.
CSS Modüllerini Kullanın
CSS Modülleri...bunlara ne oldu, değil mi? Yerel kapsamlı değişkenlerin avantajına sahiptirler ve React ile birlikte kullanılabilirler. Ama onlar, yine, tam olarak nedir?
Alıntı repo belgeleri:
CSS Modülleri, bireysel CSS dosyalarını hem CSS hem de verilere derleyerek çalışır. CSS çıktısı, doğrudan tarayıcıya enjekte edilebilen veya bir araya getirilip üretimde kullanılmak üzere bir dosyaya yazılabilen normal, global CSS'dir. Veriler, dosyalarda kullandığınız insan tarafından okunabilir adları küresel olarak güvenli çıktı CSS'sine eşlemek için kullanılır.
Daha basit bir ifadeyle, CSS Modülleri, her sınıf adına benzersiz bir programatik ad verildiğinden, aynı sınıf adını birden fazla dosyada çakışma olmadan kullanmamıza izin verir. Bu özellikle daha büyük uygulamalarda kullanışlıdır. Her sınıf adının kapsamı, yerel olarak içe aktarıldığı belirli bileşene göre belirlenir.
Bir CSS Modülü stil sayfası, normal bir stil sayfasına benzer, yalnızca farklı bir uzantıya sahiptir (örn. styles.module.css). İşte nasıl kuruldukları:
- ile bir dosya oluşturun
.module.cssuzantısı olarak. - Bu modülü React uygulamasına aktarın (daha önce gördüğümüz gibi)
- eklemek
classNamebir öğeye veya bileşene aktarın ve içe aktarılan stillerden belirli bir stile başvurun.
Süper basit örnek:
/* styles.module.css */
.font {
color: #f00;
font-size: 20px;
}
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello World</h1>
);
}
export default App;Tarz bileşenleri kullanın
Eğer kullanmış biçimli bileşenler? Oldukça popülerdir ve JavaScript'inizde gerçek CSS'yi kullanarak özel bileşenler oluşturmanıza olanak tanır. Tarz bileşeni temel olarak - buna hazır olun - stilleri olan bir React bileşenidir. Özelliklerden bazıları, benzersiz sınıf adları, dinamik stil ve her bileşenin kendi ayrı stilleri olduğundan CSS'nin daha iyi yönetimini içerir.
styled-components npm paketini komut satırına kurun:
npm install styled-componentsArdından, React uygulamasına aktarın:
import styled from 'styled-components'Bir bileşen oluşturun ve ona stil verilmiş bir özellik atayın. Geri tepmeler ile gösterilen şablon değişmezlerinin kullanımına dikkat edin. Wrapper nesne:
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 100%;
height: 100px;
background-color: red;
display: block;
`;
return <Wrapper />;
}
export default App;Yukarıdaki Wrapper bileşen, bu stilleri içeren bir div olarak işlenecektir.
koşullu stil
Stil bileşenlerinin avantajlarından biri, CSS'de aksesuarlar kullanabileceğiniz gibi, bileşenlerin kendilerinin işlevsel olmasıdır. Bu, koşullu ifadelere ve bir duruma veya propa dayalı olarak değişen stillere kapı açar.
İşte bunu gösteren bir demo:
Burada, div'leri manipüle ediyoruz display ekran durumundaki özellik. Bu durum, tıklandığında div'in durumunu değiştiren bir düğme tarafından kontrol edilir. Bu da, iki farklı durumun stilleri arasında geçiş yapar.
satır içi if ifadeleri kullanırız ? her zamanki yerine if/else sözdizimi. NS else kısım noktalı virgülden sonradır. Ve her zaman başlatıldıktan sonra durumu aramayı veya kullanmayı unutmayın. Bu son demoda, örneğin, durum yukarıda olmalıdır. Wrapper bileşenin stilleri.
Mutlu React stili!
Bu bir paket, millet! Bir React uygulamasında stil yazmanın birkaç farklı yolunu inceledik. Ve biri diğerlerinden daha iyi değil; kullandığınız yaklaşım elbette duruma bağlıdır. Umarım şimdi onları iyi anlamışsınızdır ve React stil cephaneliğinizde bir sürü araç olduğunu biliyorsunuzdur.
