Styling components in React

He in this post we are going to know how to apply styles to React components.

There are two primary ways to style react components:

1. Inline styles with the style prop
2. Regular CSS with the className prop

The style prop

In HTML we should to a string of CSS, like this:

<div style="margin-bottom: 20px; background-color: blue;"></div>

In React using the style prop we will pass an object of CSS, like this:

<div style={{marginBottom: 20, backgroundColor: 'blue'}} />

Note: the {{ and }} is actually a combination of a JSX expression and an object expression, so that means that will be equal to

const myStyles = {marginTop: 20, backgroundColor: 'blue'}
<div style={myStyles} />

Note:  The property names are camelCased

The className prop:

In JSX, we use the className prop instead of “class“

<div className="my-class" />

By Cristina Rojas.