💡 Полезный совет по React + CSS

💡 Полезный совет по React + CSS

Когда стили в компоненте начинают разрастаться, используйте CSS Modules или styled-components, чтобы избежать конфликтов классов.

Пример с CSS Modules

import styles from "./Button.module.css";

export default function Button() {

return <button className={styles.primary}>Нажми меня</button>;

}

/* Button.module.css */

.primary {

background: #007bff;

color: white;

border: none;

padding: 10px 15px;

border-radius: 8px;

cursor: pointer;

}

.primary:hover {

background: #0056b3;

}

✅ Все стили изолированы, классы автоматически получают уникальные имена.

Это особенно удобно в больших проектах, где легко возникает путаница с CSS.

@javascript_react