Files
react/docs/cookbook/02-inline-styles.md
T
2013-10-29 10:42:47 -07:00

740 B

id, title, layout, permalink, next, prev
id title layout permalink next prev
inline-styles Inline Styles cookbook inline-styles.html if-else-in-JSX.html introduction.html

In React, inline styles are not specified as a string, but as an object whose key is the camelCased version of the style name, and whose value is the style's value in string:

/** @jsx React.DOM */

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all' // note the capital 'W' here
};

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

Style keys are camelCased in order to be consistent with accessing the properties using node.style.___ in DOM. This also explains why WebkitTransition has an uppercase "W".