mirror of
https://github.com/jbranchaud/til
synced 2026-01-17 05:58:01 +00:00
Add Inline Style Attributes Should Be Camel Cased as a react til
This commit is contained in:
@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
|
|||||||
For a steady stream of TILs from a variety of rocketeers, checkout
|
For a steady stream of TILs from a variety of rocketeers, checkout
|
||||||
[til.hashrocket.com](https://til.hashrocket.com/).
|
[til.hashrocket.com](https://til.hashrocket.com/).
|
||||||
|
|
||||||
_574 TILs and counting..._
|
_575 TILs and counting..._
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -407,6 +407,7 @@ _574 TILs and counting..._
|
|||||||
### React
|
### React
|
||||||
|
|
||||||
- [Force A Component To Only Have One Child](react/force-a-component-to-only-have-one-child.md)
|
- [Force A Component To Only Have One Child](react/force-a-component-to-only-have-one-child.md)
|
||||||
|
- [Inline Style Attributes Should Be Camel Cased](react/inline-style-attributes-should-be-camel-cased.md)
|
||||||
- [Passing Props Down To React-Router Route](react/passing-props-down-to-react-router-route.md)
|
- [Passing Props Down To React-Router Route](react/passing-props-down-to-react-router-route.md)
|
||||||
|
|
||||||
### Ruby
|
### Ruby
|
||||||
|
|||||||
23
react/inline-style-attributes-should-be-camel-cased.md
Normal file
23
react/inline-style-attributes-should-be-camel-cased.md
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
# Inline Style Attributes Should Be Camel Cased
|
||||||
|
|
||||||
|
When adding a few quick styles to React components, you can add it directly
|
||||||
|
on the tags in the JSX. To do this, use the `style` tag with a plain old
|
||||||
|
JavaScript object of styles.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
<div style={{ padding: "1em", color: "#fff" }}>
|
||||||
|
```
|
||||||
|
|
||||||
|
If you are using a CSS attribute that is normally hyphenated like
|
||||||
|
`padding-top` or `background-color`, you'll need to camel case it in the
|
||||||
|
JSX.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
<div style={{ paddingTop: "1em", backgroundColor: "#fff" }}>
|
||||||
|
```
|
||||||
|
|
||||||
|
This is because our styles now need to conform to JavaScript syntax
|
||||||
|
rules since they are in the form of a POJO.
|
||||||
|
|
||||||
|
Read the [documentation](https://reactjs.org/docs/dom-elements.html#style)
|
||||||
|
for more details.
|
||||||
Reference in New Issue
Block a user