Представление встроенных стилей
Существуют и другие сложные концепции, которые добавляют мощные возможности для вашего кода React. Но вам может быть интересно узнать о более простой проблеме того, как стилизовать те элементы JSX, которые вы создаете в React. Вероятно, вы знаете, что это будет не то же самое, что работать с HTML из-за того, как вы применяете классы к элементам JSX. Если вы импортируете стили из таблицы стилей, то здесь ощутимой разницы нет. Вы применяете класс к своему элементу JSX, используя атрибут className , и применяете стили к классу в таблице стилей. Другой вариант - применить встроенные или инлайновые стили, которые очень распространены в разработке ReactJS. Вы применяете встроенные стили к элементам JSX, подобным тому, как это делается в HTML, но с несколькими отличиями JSX. Ниже приведен пример встроенного стиля в HTML:
<div style="color: yellow; font-size: 16px">Mellow Yellow</div>style, но из-за того, что JSX транспилированный, вы не можете установить строчное значение. Вместо этого вы должны передать объект JavaScript. Вот пример: <div style={{
color: "yellow",
fontSize: 16,
}}>
Mellow Yellow
</div>fontSize в стиле camelCase? Это связано с тем, что React не будет принимать имена свойств в объекте стиля в kebabCase ("шашлычной нотации", то есть если использовать дефисы). React применит правильное имя свойства для нас в HTML.Добавьте атрибут style в div в редакторе кода, чтобы придать тексту красный цвет и размер шрифта 72px. Обратите внимание, что вы можете указать размер шрифта как число, опустив единицы «px» или записать его как "72px".