React позволяет добавлять встроенные стили CSS , которые записываются как атрибуты и передаются элементам. При использовании встроенных стилей у вас есть возможность комбинировать синтаксис CSS с кодом JSX.
Примечание. Использование атрибута стиля в качестве основного средства стилизации элементов обычно не рекомендуется.
Встроенный CSS позволяет нам комбинировать синтаксис CSS с кодом JSX.
Синтаксис
В React встроенные стили не указываются в виде строки. Вместо этого они указываются с помощью объекта, ключ которого — это имя стиля, записанное в camelCase, а значение которого — значение стиля, которое обычно является строкой.
Мы можем создавать встроенные стили двумя способами. :
- Создав переменную, в которой хранятся свойства стиля, и затем передав эту переменную элементу, например
style = {styleVariable}. - Путем непосредственной передачи стиля, например
style = {{height: '10% '}}.
Код
Следующий код создает встроенные стили CSS, напрямую передавая стиль как объект:
импортировать React из 'react'; импортировать ReactDOM из 'react-dom'; импортировать приложение из './app.js';ReactDOM.render (, document.getElementById (' root ')) ;
