Using Inline CSS in JSX

In order to define inline styles on React nodes you need to pass the style prop/attribute a JavaScript object or reference to an object containing CSS properties and values.

In the example below I setup a JavaScript object, named styles, containing inline styles. Then I use the { } brackets to reference the object that should be used for the value of the style prop/attribute.

See the Pen YLdNwZ by Bunlong (@Bunlong) on CodePen.

Notice that, the CSS properties are in a camelCased form similar to what is used when writing CSS properties in JavaScript. This is required because JavaScript does not allow hyphens in names.+

When the above React/JSX code is transformed by Babel, and then parsed by a JavaScript engine, the resulting HTML will be:

<div style="color:red;background-color:black;font-weight:bold;" data-reactid=".0">test</div>

Note:

  • When specifying a pixel value React will automatically append the string “px” for you after your number value.

Updated: