diff --git a/README.md b/README.md index c982f8e..6ee7d32 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/). For a steady stream of TILs from a variety of rocketeers, checkout [til.hashrocket.com](https://til.hashrocket.com/). -_574 TILs and counting..._ +_575 TILs and counting..._ --- @@ -407,6 +407,7 @@ _574 TILs and counting..._ ### React - [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) ### Ruby diff --git a/react/inline-style-attributes-should-be-camel-cased.md b/react/inline-style-attributes-should-be-camel-cased.md new file mode 100644 index 0000000..3fa4a38 --- /dev/null +++ b/react/inline-style-attributes-should-be-camel-cased.md @@ -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 +
+``` + +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 +
+``` + +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.