You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
30 lines
806 B
30 lines
806 B
11 years ago
|
---
|
||
|
|
id: inline-styles
|
||
|
|
title: Inline Styles
|
||
|
11 years ago
|
layout: cookbook
|
||
|
11 years ago
|
permalink: inline-styles.html
|
||
|
11 years ago
|
next: if-else-in-JSX.html
|
||
|
|
prev: introduction.html
|
||
|
11 years ago
|
---
|
||
|
|
|
||
|
|
### Problem
|
||
11 years ago
|
You want to apply inline style to an element.
|
||
|
11 years ago
|
|
||
|
|
### 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:
|
||
|
|
|
||
|
11 years ago
|
```js
|
||
|
11 years ago
|
/** @jsx React.DOM */
|
||
|
|
|
||
|
|
var divStyle = {
|
||
|
|
color: 'white',
|
||
|
11 years ago
|
backgroundImage: 'url(' + imgUrl + ')',
|
||
|
11 years ago
|
WebkitTransition: 'all' // note the capital 'W' here
|
||
|
|
};
|
||
|
|
|
||
|
|
React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
|
||
|
|
```
|
||
|
11 years ago
|
|
||
|
|
### Discussion
|
||
|
11 years ago
|
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".
|