amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-25 23:05:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

add tip format for comparison

Browse Source
This commit is contained in:
Cheng Lou
2013-09-27 02:21:29 -04:00
committed by Connor McSheffrey
parent 9ba375bace
commit ed5ef46daf
2 changed files with 23 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
cookbook/cb-02-inline-styles tip.md Normal file
View File

@@ -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(<div style={divStyle}>Hello World!</div>, 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'.

20
cookbook/cb-02-inline-styles.md
View File

@@ -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(<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'.
## 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(<div style={divStyle}>Hello World!</div>, 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'.