The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Intro to inline styles in React components

Intro to inline styles in React components

5:32
React lets you use "inline styles" to style your components; inline styles in React are just JavaScript objects that you can render in an element's `style` attribute. The properties of these style objects are just like the CSS property, but they are camel case (`borderRadius`) instead of kebab-case (`border-radius`). React inline styles allow you to use all the JavaScript you know and love like variables, loops, ES6 modules etc. with your styles. React then renders these properties as inline styles in the output HTML, which means that styles are scoped to the component itself - no more cascading issues or trying to figure out how to re-use a component...everything that belongs to a component is self contained with the component!
Watch this lesson now
Avatar
egghead.io

React lets you use "inline styles" to style your components; inline styles in React are just JavaScript objects that you can render in an element's style attribute. The properties of these style objects are just like the CSS property, but they are camel case (borderRadius) instead of kebab-case (border-radius). React inline styles allow you to use all the JavaScript you know and love like variables, loops, ES6 modules etc. with your styles. React then renders these properties as inline styles in the output HTML, which means that styles are scoped to the component itself - no more cascading issues or trying to figure out how to re-use a component...everything that belongs to a component is self contained with the component!

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?