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.
Now, refresh the page.
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.
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.