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

Move the style note to be more prominent (#370)

Browse Source 
* Move the style note to be more prominent

* Fix the link

* Simplify example
This commit is contained in:
Dan Abramov
2017-11-29 13:37:26 +00:00
committed by GitHub
parent 6dfa6f782a
commit f58c9a514e
1 changed files with 6 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -60,6 +60,10 @@ The `selected` attribute is supported by `<option>` components. You can use it t
### style
>Note
>
>Some examples in the documentation use `style` for convenience, but **using the `style` attribute as the primary means of styling elements is generally not recommended.** In most cases, [`className`](#classname) should be used to reference classes defined in an external CSS stylesheet. `style` is most often used in React applications to add dynamically-computed styles at render time. See also [FAQ: Styling and CSS](/docs/faq-styling.html).
The `style` attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM `style` JavaScript property, is more efficient, and prevents XSS security holes. For example:
```js
@@ -91,31 +95,19 @@ Style keys are camelCased in order to be consistent with accessing the propertie
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:
// Result style: '10px'
<div style={{ height: 10 }}>
Hello World!
</div>;
// Becomes:
<div style="height: 10px;">
Hello World!
</div>
// This:
// Result style: '10%'
<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).
**Note:** Some examples in the documentation use `style` for convenience, but per modern web development best practices, **using the `style` attribute as the primary means of styling elements is _not recommended_.** In most cases, [`className`](#className) should be used to reference classes defined in an external CSS stylesheet. `style` is most often used in React applications to add dynamically-computed styles at render time. See also [FAQ: Styling and CSS](/docs/faq-styling.html).
### 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.