diff --git a/cookbook/cb-02-inline-styles.md b/cookbook/cb-02-inline-styles.md index 3fd77965..6f4f8264 100644 --- a/cookbook/cb-02-inline-styles.md +++ b/cookbook/cb-02-inline-styles.md @@ -6,17 +6,43 @@ permalink: inline-styles.html script: "cookbook/inline-styles.js" --- +## Q&A format + ### Problem -You want to apply inline style to an element. +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: -
-
-
-
-
+```html +/** @jsx React.DOM */ + +var divStyle = { + color: 'white', + backgroundColor: 'lightblue', + WebkitTransition: 'all' // note the capital 'W' here +}; + +React.renderComponent(
Hello World!
, 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'. \ No newline at end of file +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'. + +## Tips format + +In React, inline styles are nto 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: + +```html +/** @jsx React.DOM */ + +var divStyle = { + color: 'white', + backgroundColor: 'lightblue', + WebkitTransition: 'all' // note the capital 'W' here +}; + +React.renderComponent(
Hello World!
, 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'.