You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
778 B
778 B
id | title | layout | permalink | script |
---|---|---|---|---|
inline-styles | Inline Styles | docs | inline-styles.html | cookbook/inline-styles.js |
Problem
You want to put inline style to an element.
Solution
Instead of writing a string, create 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',
backgroundColor: 'lightblue',
WebkitTransition: 'all' // note the capital 'W' here
};
React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
Discussion
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'.