add tip style to style entry
Cheng Lou committed
Sep 27, 2013 at 02:01 UTC
dc24bb63d6cad6266cc2718bd077ba25f34e1842
1 file changed
+33
-7
docs/cookbook/cb-02-inline-styles.md
+33
-7
@@ -6,17 +6,43 @@ permalink: inline-styles.html
6
script: "cookbook/inline-styles.js"
7
---
8
9
+## Q&A format
10
+
11
### Problem
10
-You want to apply inline style to an element.
12
+You want to put inline style to an element.
13
14
### Solution
15
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:
16
15
-<div id="examples">
16
- <div class="example">
17
- <div id="inlineStylesExample"></div>
18
- </div>
19
-</div>
17
+```html
18
+/** @jsx React.DOM */
19
+
20
+var divStyle = {
21
+ color: 'white',
22
+ backgroundColor: 'lightblue',
23
+ WebkitTransition: 'all' // note the capital 'W' here
24
+};
25
+
26
+React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
27
+```
28
29
### Discussion
22
-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
30
+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'.
31
+
32
+## Tips format
33
+
34
+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:
35
+
36
+```html
37
+/** @jsx React.DOM */
38
+
39
+var divStyle = {
40
+ color: 'white',
41
+ backgroundColor: 'lightblue',
42
+ WebkitTransition: 'all' // note the capital 'W' here
43
+};
44
+
45
+React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
46
+```
47
+
48
+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'.