Style

In React, style adds dynamically-computed styles at render time.

I. Inline styles

React supports inline CSS styles for components.

Inline styles can be written as attributes in the opening tag of a JSX element:

<h1 style={{ color: 'red' }}>Hello world</h1>

II. Style names

In React, style names are written in camelCase:

const styles = {
  marginTop:       "20px",
  backgroundColor: "green"
};

III. Multi-line sytles

Multi-line styles can be stored in a variable:

const color = {
  color: 'green',
  background: 'sky'
}
<h1 style={color}>Hello</h1>

IV. Style value

In React, if you write a style value as a number, then the unit “px” is assumed.

{ fontSize: 30 }

If you want to use units other than “px,” you can use a string:

{ fontSize: "1.5em" }