React bileşenlerine stil vermek için CSS modülleri kullanmak mümkündür. CSS modülleri, her bileşen için özel olarak tanımlanabilen, sadece o bileşen için geçerli CSS stil tanımı setleridir. Bu, diğer bileşenlerin stilini etkilememeyi ve istenilen stil düzenlemelerini kolayca yapabilmeyi mümkün kılar.
CSS modülleri, JavaScript dosyası içinde tanımlanır ve bir bileşen içinde kullanılır. Aşağıdaki örnekte, styles.module.css dosyasında tanımlanmış bir CSS modülünün nasıl kullanılabileceği gösterilmiştir:
// styles.module.css .container { background-color: lightgray; padding: 20px; } // Component.js import React from "react"; import styles from "./styles.module.css"; function MyComponent() { return <div className={styles.container}>Bu bir containerdır.</div>; } export default MyComponent;
Bu örnekte, styles.module.css dosyasındaki CSS modülü import ile Component.js dosyasına eklenmiş ve bileşen içinde className özelliği ile kullanılmıştır. Böylece, MyComponent bileşeni için özel bir stil tanımlanmış ve diğer bileşenlerin stilini etkilememiştir.