Skip to content

02-inline-styles.md

Latest commit

 

History

History
23 lines (19 loc) · 1018 Bytes

02-inline-styles.md

File metadata and controls

23 lines (19 loc) · 1018 Bytes
id inline-styles
title Inline Styles
layout tips
permalink inline-styles.html
next if-else-in-JSX.html
prev introduction.html

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 (more on that later):

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode);

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. This is why WebkitTransition has an uppercase "W".