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.
35 lines
898 B
35 lines
898 B
11 years ago
|
---
|
||
|
|
id: style-prop-value-px
|
||
|
|
title: Shorthand for specifying pixel values in style prop
|
||
11 years ago
|
layout: cookbook
|
||
|
11 years ago
|
permalink: style-prop-value-px.html
|
||
|
11 years ago
|
prev: jsx-root-node-count.html
|
||
|
|
next: children-prop-type.html
|
||
|
11 years ago
|
---
|
||
|
|
|
||
|
|
### Problem
|
||
|
|
It's tedious to specify an inline `style` value by appending your number value with the string "px" each time.
|
||
|
|
|
||
|
|
### Solution
|
||
|
11 years ago
|
React automatically appends the string "px" for you after your number, so this works:
|
||
|
11 years ago
|
|
||
|
|
```js
|
||
|
|
/** @jsx React.DOM */
|
||
|
|
|
||
|
|
var divStyle = {height: 10}; // rendered as "height:10px"
|
||
|
|
React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
|
||
|
|
```
|
||
|
|
|
||
|
|
### Discussion
|
||
|
11 years ago
|
See [Inline Styles](/react/docs/cookbook/inline-styles.html) for more info.
|
||
|
11 years ago
|
|
||
|
|
Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix:
|
||
|
|
|
||
|
|
- fillOpacity
|
||
|
|
- fontWeight
|
||
|
11 years ago
|
- lineHeight
|
||
|
11 years ago
|
- opacity
|
||
|
|
- orphans
|
||
|
|
- zIndex
|
||
|
|
- zoom
|