Styling React Applications | The Odin Project

Introduction

Up until now you’ve been using vanilla CSS to style your React projects, but there are other options available. This lesson is intended to be more like a guide or a list of options for you to explore.

Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

Know about ways to style React applications

Vanilla CSS

Vanilla CSS is the simplest way to style. In the previous courses, you’ve learned a lot of CSS and all of those skills are applicable to React. There are a couple of things we’d like to highlight.

CSS Modules let you write CSS style declarations that are scoped locally.
CSS Utility Frameworks are a popular choice for styling React applications. They provide a set of pre-defined classes that you can directly use in your HTML, or JSX in our case. Tailwind CSS is by far the most popular choice.

CSS in JS

Why even write CSS in CSS when you can write it in JavaScript? Just kidding, of course!

CSS-in-JS is a paradigm for styling front-end projects. It allows you to entirely take control of CSS with JavaScript and extends it with various features. Additionally, it also helps to apply styling in a logical fashion i.e. based on state. There are various CSS-in-JS solutions. One of the most popular ones in the React ecosystem is styled-components.

Component libraries

What if everything’s already done for you? Styling, behavior, and accessibility are taken care of for you in component libraries. As the name suggests, these libraries provide adaptable and reusable components that you can use directly in your project. These components include, but are not limited to, dropdowns, drawers, calendars, toggles, tabs, and all other components you can think of.

Material UI, Radix, and Chakra UI are worth a mention when talking about component libraries.

For learning purposes throughout this course, we advise you to implement your component’s styling from scratch i.e. use vanilla CSS or a CSS-in-JS option.

Assignment

Read CSS Modules documentation and How to style React components using CSS Modules
Read CSS vs CSS-in-JS and a thorough analysis of CSS-in-JS
Skim through the styled components documentation

Knowledge check

This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.

Additional resources

This section contains helpful links to related content. It isn’t required, so consider it supplemental.

Tailwind CSS documentation