Skip to content

Commit 580706b

Browse files
authored
Merge pull request #55 from xjlim/style-props-value-px
add shorthand for specifying pixel values in style props to docs
2 parents 43e971f + f3aea25 commit 580706b

File tree

1 file changed

+16
-0
lines changed

1 file changed

+16
-0
lines changed

content/docs/reference-dom-elements.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,22 @@ function ComponentWithTransition() {
8888

8989
Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. `node.style.backgroundImage`). Vendor prefixes [other than `ms`](http://www.andismith.com/blog/2012/02/modernizr-prefixed/) should begin with a capital letter. This is why `WebkitTransition` has an uppercase "W".
9090

91+
React will automatically append a "px" suffix to certain inline style properties. For example:
92+
93+
```js
94+
// This:
95+
<div style={{ height: 10 }}>
96+
Hello World!
97+
</div>;
98+
99+
// Becomes:
100+
<div style="height: 10px;">
101+
Hello World!
102+
</div>
103+
```
104+
105+
Not all style properties are converted to pixel strings though. Certain ones remain unitless (eg `zoom`, `order`, `flex`). A complete list of unitless properties can be seen [here](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59).
106+
91107
### suppressContentEditableWarning
92108

93109
Normally, there is a warning when an element with children is also marked as `contentEditable`, because it won't work. This attribute suppresses that warning. Don't use this unless you are building a library like [Draft.js](https://facebook.github.io/draft-js/) that manages `contentEditable` manually.

0 commit comments

Comments
 (0)