False/Misleading Information

This page shows information that I believe to be incorrect:

In regular JavaScript, style names are written in hyphenated-lowercase:

const styles = {
  'margin-top':       "20px",
  'background-color': "green"

In React, those same names are instead written in camelCase:

const styles = {
  marginTop:       "20px",
  backgroundColor: "green"

In vanilla JavaScript, the shown method is pretty much useless. It cannot be used with el.setAttribute('style', styles) because it’s an object and not a string, and even a roundabout solution with JSON.stringify() would require removing the curly brackets. Also, the element’s style attribute (el.style) is read-only, and so el.style = styles will fail. Moreover, the idiomatic way to set styles for an element with vanilla JavaScript is el.style.backgroundColor = 'red', which uses camelCase. The description on this page is misleading at best, and should be updated to avoid confusion.


In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style’s value, usually a string


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.