CSS modülleri, React bileşenlerine stil vermek için kullanılan bir yöntemdir. CSS modülleri, her bileşen için benzersiz bir className oluşturur ve bu sayede aynı class isimleriyle çakışma olmaz. Aşağıdaki adımlar CSS modüllerini nasıl kullanacağınıza dair bir örnek vermektedir:
CSS modülü dosyasını oluşturun: Bileşenin stil dosyasını aynı dizinde .module.css uzantısı ile oluşturun.
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.text {
font-size: 18px;
color: black;
}
CSS modülünü içe aktarın: Bileşen dosyasındaki CSS modülünü içe aktarın.
import styles from ‘./styles.module.css’;
Class isimlerini kullanın: Bileşenin render fonksiyonunda, CSS modülündeki class isimlerini kullanarak stil verin.
function MyComponent() {
return (
<div className={styles.container}>
<p className={styles.text}>Hello World!</p>
</div>
);
}
Bu şekilde, React bileşenine CSS modülleri kullanarak stil verilmiş olur. Class isimleri benzersiz olduğundan, farklı bileşenler arasında stil çakışması riski olmaz.