javascript / beginner
Snippet
Inline-Styles in React
In React werden Inline-Styles als JavaScript-Objekte definiert statt als Strings. CSS-Eigenschaftsnamen müssen camelCase verwenden (z. B. backgroundColor) anstelle des traditionellen kebab-case (z. B. background-color).
snippet.js
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
Erklärung
1
const boxStyle = {
Styles werden in einem konstanten Objekt gespeichert.
2
backgroundColor: 'lightblue',
Verwendet camelCase für den CSS-Eigenschaftsnamen.
3
style={boxStyle}
Das Style-Objekt wird der Komponente über das style-Attribut übergeben.