How to use multiple CSS inline properties inside JSX?

How to use JSX in React.js? »

You can have, and will often have, a set of properties rather than a single key-value pair. Here I’m going to demonstrate the same using a simple example. Suppose you have an h1 element which you want in red color and yellow background.

In plain HTML/CSS:

<h1 style=”color:red; background-color: yellow”>Some heading</h1>

In JSX:

<h1 style={{ color: ‘red’, backgroundColor: ‘yellow’ }}>Some heading</h1>

You’d notice quite a few changes:

  1. The double quotes have been changed to {{ and }}.

<h1 style={{ color: ‘red’, backgroundColor: ‘yellow’ }}>Some heading</h1>

  1. The property keys got the naming conventions of camelCase (as discussed above).

<h1 style={{ color: ‘red’, backgroundColor: ‘yellow’ }}>Some heading</h1>

  1. The values got single quotes around it.

<h1 style={{ color: ‘red’, backgroundColor: ‘yellow’ }}>Some heading</h1>

  1. The property separator (denoted by semicolon in CSS) have been replaced by comma instead.

<h1 style={{ color: ‘red’, backgroundColor: ‘yellow’ }}>Some heading</h1>

Leave a Comment