diff --git a/cookbook/cb-02-inline-styles tip.md b/cookbook/cb-02-inline-styles tip.md new file mode 100644 index 000000000..1e239419b --- /dev/null +++ b/cookbook/cb-02-inline-styles tip.md @@ -0,0 +1,23 @@ +--- +id: inline-styles-tip +title: Inline Styles +layout: docs +permalink: inline-styles.html +script: "cookbook/inline-styles.js" +--- + +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'. diff --git a/cookbook/cb-02-inline-styles.md b/cookbook/cb-02-inline-styles.md index 6f4f8264a..1aad6e264 100644 --- a/cookbook/cb-02-inline-styles.md +++ b/cookbook/cb-02-inline-styles.md @@ -6,8 +6,6 @@ permalink: inline-styles.html script: "cookbook/inline-styles.js" --- -## Q&A format - ### Problem You want to put inline style to an element. @@ -28,21 +26,3 @@ 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'. - -## 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'.