Добавление встроенных стилей в React
Возможно, вы заметили в последнем случае, что в дополнение к атрибуту style установленному для объекта JavaScript, было несколько других различий синтаксиса из встроенных стилей HTML. Во-первых, имена некоторых свойств стиля CSS используют "верблюжью нотацию". Например, последний вызов задает размер шрифта с fontSize вместо font-size . Слова со знаками-разделителями, такие как font-size являются недопустимым синтаксисом для свойств объекта JavaScript, поэтому React использует "верблюжью нотацию". Как правило, любые свойства дефисного стиля записываются с использованием "верблюжьей нотации" в JSX. Предполагается, что все единицы длины значения свойства (например, height , width и fontSize ) находятся в px если не указано иное. Если вы хотите использовать em , например, вы переносите значение и единицы в кавычки, например {fontSize: "4em"} . Помимо значений длины, которые по умолчанию px , все остальные значения свойств должны быть заключены в кавычки.
Если у вас большой набор стилей, вы можете назначить объект стиля константе, чтобы ваш код был более организован. Объявите свою константу стилей как глобальную переменную в верхней части файла. Инициализируйте константу стилей и назначьте ей объект с тремя свойствами стиля и их значениями. Придайте элементу div фиолетовый цвет (purple), размер шрифта 40 и бордер 2px solid purple. Затем установите атрибут style, равный константе стилей.