Do the property names for inline styles in React coincide with CSS property names?

Frequently Asked Questions React.js FAQ
1

Question

Do the property names for inline styles in React coincide with CSS property names?

Answer

The property names for inline styles in React do coincide with CSS property names, however, the property name is camelCased instead of hyphenated (like it is in CSS) and the property value should be wrapped in quotes.

For example:

import React from 'react';
import ReactDOM from 'react-dom';

const styledHeading = <h3 style={{backgroundColor: 'skyblue', fontSize: '40px', color: 'maroon'}}>I'm an H3 element with inline styles!</h3>; 
//Note the use of camelCase for the property names and the quotes wrapping the property values

ReactDOM.render(styledHeading, document.getElementById('app'));
5 Likes
2

Adding to this, years later

As I understand it, the naming convention for CSS properties in React borrows from the naming convention of CSS properties from Vanilla JS. If you are coming from Vanilla JS to React, the syntax should be familiar.

JavaScript Tutorial has a nice explanation of kebab-case versus camelCase including a table of CSS properties in both JS and CSS.

That JavaScript Tutorial page also describes the ability in Vanilla JS to use a string–with kebab-case CSS properties (!!)–to set styling with JavaScript, via the cssText property of the style object. The cssText property apparently overrides the existing style attribute on the selected HTML element.

<!--Inline styles in pure HTML-->
<p style="background-color: red">Lorem ipsum<p>

// Inline styles in vanilla JS
// Method 1 - Setting specified CSS property on the element's style object
const p = document.querySelector("p")
p.style.backgroundColor = "red"; // camelCase properties

// Method 2 - Using the cssText property of the element's style object
const p = document.querySelector("p");
p.style.cssText = 'background-color:red'; // kebab-case properties, in a string

// Inline styles in React (JSX)
const p = <p style={{backgroundColor: "red"}}>Lorem ipsum</p>;
8 Likes