React.js CSS Kullanımı

React.js’de CSS kullanımı birkaç farklı yöntemle gerçekleştirilebilir. İşte en yaygın olanları:

Inline CSS: Stil tanımlamalarını doğrudan JSX içinde yapabilirsiniz. Bu yöntem küçük projeler veya hızlı prototipler için uygundur ancak genellikle tavsiye edilmez çünkü bakımı zor olabilir.

function MyComponent() {
  return (
    <div style={{ backgroundColor: 'blue', color: 'white' }}>
      Hello, World!
    </div>
  );
}

JavaScript
​x
 
function MyComponent() {  return (    <div style={{ backgroundColor: 'blue', color: 'white' }}>      Hello, World!    </div>  );}

CSS Dosyaları: Dışarıda CSS dosyaları oluşturup, bu dosyaları React bileşenlerinde kullanabilirsiniz. Bunu yapmak için, genellikle className özelliğini kullanırsınız ve ardından CSS dosyasında bu sınıflara stil tanımları yaparsınız.

Örneğin, styles.css dosyasında:

.myComponent {
  background-color: blue;
  color: white;
}

JavaScript
xxxxxxxxxx
 
.myComponent {  background-color: blue;  color: white;}

Ve React bileşeninde:

import React from 'react';
import './styles.css';

function MyComponent() {
  return (
    <div className="myComponent">
      Hello, World!
    </div>
  );
}

JavaScript
xxxxxxxxxx
 
import React from 'react';import './styles.css';​function MyComponent() {  return (    <div className="myComponent">      Hello, World!    </div>  );}

CSS Modülleri: Bu yöntem, bileşenleriniz için yerel kapsamlı CSS sınıfları oluşturmanıza olanak tanır. CSS dosyasını *.module.css uzantısıyla kaydederek başlayabilirsiniz. Bu sayede CSS sınıfları otomatik olarak yerel olarak kapsanır ve bileşenler arasında stil çakışması olmaz.

Örneğin, MyComponent.module.css dosyasında:

.myComponent {
  background-color: blue;
  color: white;
}

JavaScript
xxxxxxxxxx
 
.myComponent {  background-color: blue;  color: white;}

Ve React bileşeninde:

import React from 'react';
import styles from './MyComponent.module.css';

function MyComponent() {
  return (
    <div className={styles.myComponent}>
      Hello, World!
    </div>
  );
}

JavaScript
xxxxxxxxxx
 
import React from 'react';import styles from './MyComponent.module.css';​function MyComponent() {  return (    <div className={styles.myComponent}>      Hello, World!    </div>  );}

Bu yöntemlerden hangisini seçerseniz seçin, projenize en uygun olanı seçtiğinizden emin olun.

Share on Facebook

React.js CSS Kullanımı

Reklam Engelleyici Algılandı!