Adding Styles to React Components with CSS or Inline Styles

InstructorChris Achard

Share this video with your friends

Send Tweet

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.