Применение Inline-стилей в JSX

В процессе работы с React и JSX вы можете столкнуться с необходимостью написания inline-стилей. В таком случае, стоит помнить о спецификах синтаксиса стилей внутри JSX. Ответ на вопрос "Как написать инлайн-стиль, который указывает font-size:12px и color:red; в JSX?" будет: style={{fontSize:'12px',color:'red'}}.

В отличие от обычного HTML, где мы обычно указываем CSS-свойства в кебаб-казе (например, font-size), в JSX мы используем верблюжий регистр (camelCase), поскольку мы работаем внутри JavaScript среды. Таким образом, font-size становится fontSize.

Еще одно отличие — значения CSS-свойств всегда являются строками и заключаются в кавычки. Например '12px', а не просто 12.

Также стоит отметить, что стили передаются в качестве объекта JavaScript, поэтому они обернуты в двойные фигурные скобки: {}.

Пример использования инлайн-стилей в JSX

function StyledComponent() {
  return (
    <div style={{fontSize:'12px', color:'red'}}>
      Этот текст будет красным и с размером шрифта 12 пикселей
    </div>
  );
}

В этом компоненте мы применили inline-стилий, который сделал текст красным и установил размер шрифта на 12 пикселей.

Лучшие практики использования стилей в JSX

При работе с JSX рекомендуется избегать инлайн-стилей, когда это возможно, и вместо этого использовать CSS-модули или стилизованные компоненты для большей производительности. В некоторых случаях инлайн-стили могут быть полезны, но они обычно используются для динамически изменяемых стилей, которые зависят от состояния компонента.