Beginning ReactJS Foundations Building User Interfaces with ReactJS

10Styling React

How to style React components, and React user interfaces in general, can be a polarizing topic. There are many ways to handle style in React, and you're likely to see several of them used side-by-side on most React projects.

In this chapter, you'll learn:

• How to include and use CSS files in React.
• How to write inline styles in React.
• How to use CSS Modules.
• How to use CSS-in-JS.

THE IMPORTANCE OF STYLES

Style in web applications determines how individual elements look, including typefaces, weight of text, colors, backgrounds, width, and height, for example. It also determines how elements relate to each other and to the HTML document or browser window—their borders, margins, alignment, and position. Certain CSS styles create animations. Still others affect how elements behave and how they look when they're in different states, such as hovered over, clicked, focused, and so on.

Even if you don't add any style at all to your user interface, it's still affected by the browser's default styles, which are rarely ideal. Styles also determine how your user interface will look on different sized devices, when printed, and even how it will sound when read by a text-to-speech reader.

With styles determining so much of what the end user's experience with your application will be, it's essential for a developer or a development team to give more than a little thought to how style will be managed and implemented in a user interface.

Because React is just JavaScript and ...