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

Merge pull request #324 from hozefaj/patch-1

Browse Source 
for inline styles add example for units on values
This commit is contained in:
Brian Vaughn
2017-11-24 08:32:47 -08:00
committed by GitHub
parent 1d1441354c b33a587ec5
commit aedbd8f8dc
1 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
content/docs/reference-dom-elements.md
View File

@@ -88,7 +88,7 @@ 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:
React will automatically append a "px" suffix to certain numeric inline style properties. If you want to use units other than "px", specify the value as a string with the desired unit. For example:
```js
// This:
@@ -100,6 +100,16 @@ React will automatically append a "px" suffix to certain inline style properties
<div style="height: 10px;">
Hello World!
</div>
// This:
<div style={{ height: '10%' }}>
Hello World!
</div>;
// Becomes:
<div style="height: 10%;">
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).