add tip format for comparison
Cheng Lou committed
Sep 27, 2013 at 02:21 UTC
4d9cde43be2335ab78615ab7715e323f8c04a933
2 files changed
+23
-20
docs/cookbook/cb-02-inline-styles tip.md
new
+23
@@ -0,0 +1,23 @@
1
+---
2
+id: inline-styles-tip
3
+title: Inline Styles
4
+layout: docs
5
+permalink: inline-styles.html
6
+script: "cookbook/inline-styles.js"
7
+---
8
+
9
+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:
10
+
11
+```html
12
+/** @jsx React.DOM */
13
+
14
+var divStyle = {
15
+ color: 'white',
16
+ backgroundColor: 'lightblue',
17
+ WebkitTransition: 'all' // note the capital 'W' here
18
+};
19
+
20
+React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
21
+```
22
+
23
+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'.
docs/cookbook/cb-02-inline-styles.md
-20
@@ -6,8 +6,6 @@ permalink: inline-styles.html
6
script: "cookbook/inline-styles.js"
7
---
8
9
-## Q&A format
10
-
9
### Problem
10
You want to put inline style to an element.
11
@@ -28,21 +26,3 @@ React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
26
27
### Discussion
28
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'.