Frontend Разработка | JavaScript & Верстка сайтов. HTML, CSS и React. Уроки для Фронтенд Developer. JS, Vue и Web технологии. IT Карьера, Курсы и Coding.
Наука · 8 октября 2026 г.
🔥 Трюк с style в React, который упростит работу с динамическими стилями
🔥 Трюк с style в React, который упростит работу с динамическими стилями Вместо создания длинных условий или классов, можно использовать spread-оператор и логические выражения прямо в объекте стилей: <div style={{ padding: '16px', ...(isError && { border: '1px solid red' }), ...(isActive ? { backgroundColor: '#def' } : { opacity: 0.5 }), }} > Hello! </div> 📌 Что тут происходит: * ...(условие && { стиль }) добавит стиль, если условие true; * Альтернатива classnames для inline-стилей; * Чисто, читаемо и удобно при большом числе условий. 🧠 Подходит, когда используете inline-стили (например, в дизайн-системах или при генерации email-шаблонов). 💡 Можно комбинировать с memo-компонентами и кастомными хуками, чтобы минимизировать ререндеры и повысить производительность. 👉 @frontend_1