javascript / beginner
Snippet
Inline Styles in React
In React, inline styles are defined as JavaScript objects rather than strings. CSS property names must use camelCase (e.g., backgroundColor) instead of the traditional kebab-case (e.g., background-color).
snippet.js
javascript
1
2
3
4
5
6
7
8
9
const boxStyle = {backgroundColor: 'lightblue',padding: '20px',borderRadius: '8px'};function StyledBox() {return <div style={boxStyle}>Hello World</div>;}
react
Breakdown
1
const boxStyle = {
Styles are stored in a constant object.
2
backgroundColor: 'lightblue',
Uses camelCase for the CSS property name.
3
style={boxStyle}
The style object is passed to the component via the style attribute.