Skip to content

add shorthand for specifying pixel values in style props to docs #55

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 9, 2017
Merged

add shorthand for specifying pixel values in style props to docs #55

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3292248
add shorthand for specifying pixel values in style props to docs
xjlim Oct 7, 2017
b0db2aa
include notes on unitless props
xjlim Oct 8, 2017
b333f92
fix minor formatting issue
xjlim Oct 8, 2017
f3aea25
Wording nits
bvaughn Oct 9, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions content/docs/reference-dom-elements.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,22 @@ function ComponentWithTransition() {

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".

React will automatically append a "px" suffix to certain inline style properties. For example:

```js
// This:
<div style={{ height: 10 }}>
Hello World!
</div>;

// Becomes:
<div style="height: 10px;">
Hello World!
</div>
```

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).
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This actually got me curious -- while the first and second values of flex are unitless, the third is not. Luckily, it's not possible to provide more than one value other than as a string...


### suppressContentEditableWarning

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.
Expand Down