6. Styling React Apps

Learning Objectives

By the end of this chapter, you will be able to do the following:

– Style JSX elements via inline style assignments or with the help of CSS classes

– Set inline and class styles, both statically and dynamically or conditionally

– Build reusable components that allow for style customization

– Utilize CSS Modules to scope styles to components

– Understand the core idea behind styled-components, a third-party CSS-in-JS library

Introduction

React.js is a frontend JavaScript library. This means that it's all about building (web) user interfaces and handling user interaction.

Up to this point, this book has extensively explored how React may be used to add interactivity to a web app. State, event handling, and dynamic content are key concepts relating to this.

Of course, websites and web apps are not just about interactivity. You could build an amazing web app that offers interactive and engaging features, and yet it may still be unpopular if it lacks appealing visuals. Presentation is key, and the web is no exception.

Therefore, like all other apps and websites, React apps and websites need proper styling. And when working with web technologies, Cascading Style Sheets (CSS) is the language of choice.

This book is not about CSS, though. It won't explain or teach you how to use CSS as there are dedicated, better resources for that (e.g., the free CSS guides at https://developer.mozilla...

How Does Styling Work in React Apps?

Up to this point, the apps and examples presented in this book have only had minimal styling. But they at least had some basic styling, rather than no styling at all.

But how was that styling added? How can styles be added to user interface elements (such as DOM elements) when using React?

The short answer is "just as you would to non-React apps". You can add CSS styles and classes to JSX elements just as you would to regular HTML elements. And in your CSS code, you can use all the features and selectors you know from CSS. There are no React-specific changes you have to make when writing CSS code.

The code examples used up to this point (i.e., the activities or other examples hosted on GitHub) always used regular CSS styling with the help of CSS selectors to apply some basic styles to the final user interface. Those CSS rules were defined in an index.css file, which is part of every newly created React project (when using create...

Scoped Styles with CSS Modules

CSS Modules is the name for an approach where individual CSS files are linked to specific JavaScript files and the components defined in those files. This link is established by transforming CSS class names, such that every JavaScript file receives its own, unique CSS class names. This transformation is performed automatically as part of the code build workflow. Therefore, a given project setup must support CSS Modules by performing the described CSS class name transformation. Projects created via create-react-app support CSS Modules by default.

CSS Modules are enabled and used by naming CSS files in a very specific and clearly defined way: <anything>.module.css. <anything> is any value of your choosing, but the .module part in front of the file extension is required as it signals (to the project build workflow) that this CSS file should be transformed according to the CSS Modules approach.

Therefore, CSS files named like this must be...

Summary and Key Takeaways

• Standard CSS can be used to style React components and JSX elements.
• CSS files are typically directly imported into JavaScript files, which is possible thanks to the project build process, which extracts the CSS code and injects it into the document (the HTML file).
• As an alternative to global CSS styles (with element, id, class, or other selectors), inline styles can be used to apply styling to JSX elements.
• When using CSS classes for styling, you must use the className prop (not class).
• Styles can be set statically and dynamically or conditionally with the same syntax that is used for injecting other dynamic or conditional values into JSX code—a pair of curly braces.
• Highly configurable custom components can be built by setting styles (or CSS classes) based on prop values or by merging received prop values with other styles or class name strings.
• When using just CSS, clashing CSS class names can be a problem.
...

Apply What You Learned

You are now not only able to build interactive user interfaces but also style those user interface elements in engaging ways. You can set and change those styles dynamically or based on conditions.

In this section, you will find two activities that allow you to apply your newly gained knowledge in combination with what you learned in previous chapters.

Activity 6.1: Providing Input Validity Feedback upon Form Submission

In this activity, you will build a basic form that allows users to enter an email address and a password. The provided input of each input field is validated, and the validation result is stored (for each individual input field).

The aim of this activity is to add some general form styling and some conditional styling that becomes active once an invalid form has been submitted. The exact styles are up to you, but for highlighting invalid input fields, the background color of the affected input field must be changed, as well as its...