Dobler Dobler - 3 months ago 17
React JSX Question

Proper way to declare browser specific inline styles in React

How do you properly define browser specific inline styles, such as webkit that start with a "-" symbol?

for example:

-webkit-box-shadow

Answer

It can be written as WebkitBoxShadow. From the official documentation:

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. Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. node.style.backgroundImage). Vendor prefixes other than ms should begin with a capital letter.

Comments