Skip to content

Commit f3aea25

Browse files
authored
Wording nits
1 parent b333f92 commit f3aea25

File tree

1 file changed

+11
-38
lines changed

1 file changed

+11
-38
lines changed

content/docs/reference-dom-elements.md

Lines changed: 11 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -88,48 +88,21 @@ 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-
When specifying a pixel value for your inline style prop, React automatically appends the string "px" for you after your number value, so this works:
91+
React will automatically append a "px" suffix to certain inline style properties. For example:
9292

9393
```js
94-
const divStyle = {
95-
height: 10 // rendered as "height:10px"
96-
};
97-
98-
function HelloWorldComponent() {
99-
return <div style={divStyle}>Hello World!</div>;
100-
}
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>
101103
```
102104

103-
Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix:
104-
105-
- `animationIterationCount`
106-
- `boxFlex`
107-
- `boxFlexGroup`
108-
- `boxOrdinalGroup`
109-
- `columnCount`
110-
- `fillOpacity`
111-
- `flex`
112-
- `flexGrow`
113-
- `flexPositive`
114-
- `flexShrink`
115-
- `flexNegative`
116-
- `flexOrder`
117-
- `fontWeight`
118-
- `lineClamp`
119-
- `lineHeight`
120-
- `opacity`
121-
- `order`
122-
- `orphans`
123-
- `stopOpacity`
124-
- `strokeDashoffset`
125-
- `strokeOpacity`
126-
- `strokeWidth`
127-
- `tabSize`
128-
- `widows`
129-
- `zIndex`
130-
- `zoom`
131-
132-
See [unitless properties](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59) for more examples.
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).
133106

134107
### suppressContentEditableWarning
135108

0 commit comments

Comments
 (0)