CSS Kullanarak Tepki Oluşturma
React'i CSS ile stillendirmenin birçok yolu vardır, bu eğitimde üç yaygın yolu daha yakından inceleyeceğiz:
- satır içi stil
- CSS stil sayfaları
- CSS Modülleri
Satır İçi Şekillendirme
Bir öğeye satır içi stil özniteliği ile stil vermek için değerin bir JavaScript nesnesi olması gerekir:
Örnek:
Stil bilgilerini içeren bir nesne ekleyin:
const Header = () => {
return (
<>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Not: JSX'te, JavaScript ifadeleri küme parantezleri içinde yazılır ve JavaScript nesneleri de küme parantezleri kullandığından, yukarıdaki örnekteki stil, iki küme parantezinin içine yazılmıştır {{}}.
camelCased Özellik Adları
Satır içi CSS bir JavaScript nesnesine yazıldığından, gibi kısa çizgi ayırıcılara sahip özellikler background-colordeve büyük/küçük harf sözdizimi ile yazılmalıdır:
Örnek:
backgroundColorBunun yerine
kullanın background-color:
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
JavaScript Nesnesi
Ayrıca stil bilgisine sahip bir nesne oluşturabilir ve ona stil özelliğinde başvurabilirsiniz:
Örnek:
Adlı bir stil nesnesi oluşturun myStyle:
const Header = () => {
const myStyle = {
color: "white",
backgroundColor: "DodgerBlue",
padding: "10px",
fontFamily: "Sans-Serif"
};
return (
<>
<h1 style={myStyle}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Sertikalı olmak!
95 $ KAYIT
CSS Stil Sayfası
CSS stilinizi ayrı bir dosyaya yazabilir, dosyayı
.cssdosya uzantısıyla kaydedip uygulamanıza aktarabilirsiniz.
Uygulama.css:
"App.css" adında yeni bir dosya oluşturun ve içine biraz CSS kodu ekleyin:
body {
background-color: #282c34;
color: white;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Not: Dosyayı istediğiniz gibi çağırabilirsiniz, sadece doğru dosya uzantısını unutmayın.
Stil sayfasını uygulamanıza aktarın:
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
ReactDOM.render(<Header />, document.getElementById('root'));
CSS Modülleri
Uygulamanıza stil eklemenin başka bir yolu da CSS Modüllerini kullanmaktır.
CSS Modülleri, ayrı dosyalara yerleştirilen bileşenler için uygundur.
Bir modülün içindeki CSS, yalnızca onu içe aktaran bileşen için kullanılabilir ve ad çakışmaları konusunda endişelenmenize gerek yoktur.
.module.css
Uzantı ile CSS modülünü oluşturun , örneğin: my-style.module.css.
"my-style.module.css" adında yeni bir dosya oluşturun ve içine biraz CSS kodu ekleyin:
benim-style.module.css:
.bigblue {
color: DodgerBlue;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Stil sayfasını bileşeninize aktarın:
araba.js:
import styles from './my-style.module.css';
const Car = () => {
return <h1 className={styles.bigblue}>Hello Car!</h1>;
}
export default Car;
Bileşeni uygulamanıza aktarın:
index.js:
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));