mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
740 B
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".