Styling with CSS in React

Linked Projects:

Calreact
 
Lesson links:

Lesson code - https://github.com/learnetto/calreact/tree/lesson-3.7

One final thing I want to quickly cover in this lesson is styling using CSS in React components.

Let's say we want to style our button here – give it a background color, add some padding, and bigger text.

Typically you'd just define a class:

<input type='submit' value='Make Appointment' class='submit-button' />

and define some styling in an appointments.scss file.

.submit-button {
  background: #CC0000;
  color: #FFFFFF;
  cursor: pointer;
  border: 0;
  box-shadow: none;
  border-radius: 0px;
  font-size: 20px;
  padding: 10px;
}

Now, refresh the page.

Unfortunately, that's not going to work The reason for that is class is a reserved keyword in Javascript. React is showing us a warning here – Unknown DOM property class. Did you mean className?

So that's what we need to use in React, className instead of class. Let's change that.

<input type='submit' value='Make Appointment' className='submit-button' />

Refresh the page and we get a nice, big red button.

Another bit of styling I want to do is the way each appointment is displayed. Let's add a little bit of padding and a horizontal line between appointments. So we need to go to the appointment component and add a className, let's just say appointment, and then add some CSS for that class in the appointments.scss file, some padding and a button border.

.appointment {
  padding-top: 10px;
  border-bottom: solid 1px #ccc;
}

Refresh the page again and we can see our appointments look a lot neater, much easier on the eye. That's it, that's some basic CSS in React, and that's the end of this lesson.

Liked this tutorial? Get more like this in your inbox