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'));
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.
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>;