@quinton.prosacco
В React для получения CSS свойств можно использовать объект style
.
Например, чтобы добавить стиль к элементу div
, можно создать объект style
со свойствами CSS и передать его как атрибут style
для элемента div
:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const divStyle = { backgroundColor: 'blue', color: 'white', fontSize: '20px' }; function App() { return ( <div style={divStyle}> Hello, World! </div> ); } |
В этом примере, объект divStyle
содержит три свойства CSS: backgroundColor
, color
, и fontSize
, которые определяют стиль элемента div
.
Также можно использовать условия и динамически изменять объект style
. Например:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function App() { const isActive = true; const divStyle = { backgroundColor: isActive ? 'green' : 'red', color: 'white', fontSize: '20px' }; return ( <div style={divStyle}> Hello, World! </div> ); } |
В этом примере, свойство backgroundColor
объекта divStyle
зависит от переменной isActive
. Если isActive
равно true
, то фон будет зеленым, в противном случае - красным.
Таким образом, использование объекта style
позволяет легко определять CSS свойства в React.