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

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