How to Inline Style JSX (React) with CSS

Learn how to inline style JSX elements with CSS.

This is how inline styling looks with JSX syntax:

<h1 style={{fontSize: "24px"}}>Inline styled JSX</h1>

How the same inline styling looks with HTML syntax:

<h1 style="font-size:24px">Inline styled HTML</h1>

As you can tell, there’s quite a difference.

  • JSX uses double curly braces {{ }} to surround styling properies and values, in HTML it’s double quotes " ".
  • JSX uses camelCase syntax for property names (if they have more than one word), e.g. fontSize or textTransform. In HTML, multi-word properties uses hyphens font-size, text-transform
  • JSX wraps quotes (double or single) around property values if they’re strings, "24px", HTML doesn’t 24px.

Inline HTML and JSX styling have one thing in common, properties and values are separated by a colon (:).

Good to know: if you pass numeric values (like 24) to your JSX properties, you don’t have to wrap them in quotes, as they will default to pixel values px. So if you don’t want to use px units, but instead %, rem, or something else, you need to define it the values as strings: "50%", "2rem", etc.

If you have multiple style declarations

If you have more than one inline style declaration in JSX, you separate each declaration with a comma:

<h1 style={{fontSize: "24px", textTransform: "uppercase"}}>Inline styled JSX</h1>

In HTML you separate declarations with a semi colon:

<h1 style="font-size:24px;text-transform:uppercase">Inline styled HTML</h1>

Note: In inline HTML styling you only need to add semi-colons ; to separate style declarations, the last declaration doesn’t require it, but it won’t change anything if you do.

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊


Share & Discuss on