1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Adding Styles to React Components with CSS or Inline Styles

    reactReact

    There are two main (default) ways to add styles to React components:

    First, just normal CSS classes can be added to react components by setting a className attribute:

    <p className='big-text'>BIG</p>

    (It's called className instead of class because "class" is a reserved keyword in javascript)

    Second, "inline styles can be added as javascript objects to the style attribute of a component:

    <p style={{ fontSize: 20, color: 'blue' }}>Blue</p>

    Notice that the "double curly braces" represent a javascript object being created inside of JSX, and also that the css attributes are camel cased.