Section 32 – Lesson 419 – Complete 2020 Web Development Bootcamp

Lesson 419 – JSX Attributes & Styling React Elements

You can add css styling elements in a JSX file. For example, to add a css class called “heading” to an html h1 element, you would use this code –

<h1 className="heading">My Favourite Foods</h1>

In regular html, you would use this code –

<h1 class="heading">My Favourite Foods</h1>

However, in JSX you use “className” and not “class”. In JSX, you use camel case so, for example, the html global attribute “spellcheck” becomes “spellCheck” in JSX.

You can also target html elements using css just like you would do in a regular html file. So to change the color of a ul element you can simply write the usual css code in your css file like this –

ul {
  color: blue;
}