React Styles
React CSS Styles
React supports inline CSS styles for elements. Styles are supplied as a style prop with a JavaScript object.
// Passing the styles as an objectconst color = {color: 'blue',background: 'sky'};<h1 style={color}>Hello</h1>// Passing the styles with an inline object, as a shorthand<h1 style={{ color: 'red' }}>I am red!</h1>
Style Names And Values
In React, style names are written in “camelCase”, unlike in CSS where they are hyphenated. In most cases, style values are written as strings. When entering numeric values, you don’t have to enter px because React automatically interprets them as pixel values.
// Styles in CSS:// font-size: 20px;// color: blue;// Would look like this style object in React:const style = {fontSize: 20,color: 'blue',};
