In this article, we will discuss various different ways to style web applications in React. Choosing the best one depends on needs of your project and type of your application. With that being said, we’ll tell you pros and cons of every approach.
Inline styles
let’s start with the most straightforward approach. This way, you don’t have to create classes or other CSS rules in a separate CSS file. Also, it can help you avoid unnecessary cluttering of global name space for classes.
Styles applied this way have a higher precedence than doing it via classes. This is the same principle as in HTML.
As you may know, React applications are laid out in JSX, which looks like HTML, but it’s actually JavaScript. For this reason, inline styles applied as objects with key-property pairs, where keys are CSS properties and values are CSS values. Like so:
{backgroundColor: “red”}
We can not use the ‘background-color’ syntax like we do in CSS. And because this is a JavaScript object, the value needs to be a string. And the ‘background-color’ property is merged together and written in camelCase.
Inline classes have many advantages, they are easy to read and write. For example, it can be a solid solution for building a prototype. However, as your application and codebase grows in size, inline styles can be difficult to maintain. Also, it does not support essential CSS features like media queries, pseudo classes and other advanced syntax of CSS.
External CSS stylesheets
The standard way to customize React elements’ appearance is to use external CSS stylesheets. This is fine if you’re uncomfortable writing CSS classes in JavaScript, but want to keep things simple. Advantage of using external CSS stylesheet is that you can write CSS styles using a familiar syntax, including pseudo classes and media rules.
However, defining all the CSS classes and rules in one file can be difficult, because you have to come up with unique class names.
External styled-components library
It is a common trend to style React components in JavaScript. The most popular solution is to use external styled-components library.
It combines the best features of both inline styles and external stylesheets. You can write CSS using traditional syntax and store them in each component individually. A great feature is that classname values defined via styled-components are scoped to the component where they are defined. This way, you don’t have to come up with many unique class names.
Also, great feature of `styled-components’ is that you write CSS in JavaScript, but can still use pseudo classes, media rules and similar special CSS syntax.
Even more impressively, this library can be used to create custom styled components. You just define the styles and store them in a variable. Then you can reference that variable in JSX and it will be just like a custom component.
Conditional styling
The great thing about React is that it’s all JavaScript. Even JSX, which looks like HTML, is just a syntax sugar to write JavaScript code. Therefore it allows you to embed dynamic expression within what looks like markup of your page.
You can use this feature to define a React conditional className or apply inline styles conditionally. This is a powerful feature to dynamically change the appearance of your component. Look at websites like SimpleFrontEnd, which contains many React guides.
For example, you can take user’s input, like value of a checkbox element on your website. You can control value of the input from the state, and customize the appearance of your application depending on this state. For example, ticking a checkbox could turn on a dark mode. You simply set the conditional styling to make backgrounds dark and text light colors. And removing selection of the checkbox could remove dark mode.
Possibilities for customization of elements are endless.
Conditional styling is only possible thanks to virtual DOM.
You can’t say that you understand React unless you have a thorough knowledge of virtual DOM and how rendering works in React.
This means understanding all the lifecycle methods, as well as default rendering in React.
Virtual DOM is an important feature of React that makes it possible to have blazing fast web applications.
Dynamic styles
Most conditional styles are based on state values. So it’s Important to know how state works to understand dynamic styles in React.
The state object is treated differently from other objects in React. You can not directly mutate it. You need to use the setState() method to update state in React. This is done to ensure the consistency of state values across entire component tree.
In functional components, you have hooks, which provide an easier syntax for updating the state. In functional components, you define state variables and the functions to update them at the same time. To change the state, all you need to do is call the corresponding updater function.
Selecting DOM elements
Sometimes you need to programmatically style an element. Instead of using CSS or even CSS-in-JS libraries, directly access the element and change its styles.
As we already mentioned, React has its own way of creating elements and maintaining DOM. The elements we define in JSX are React elements, even if they look like common HTML elements, like <div>. They are still React elements, and you can not use the standard vanilla JavaScript methods like getElementById() to work with these elements. Read this guide to learn how to implement getElementById in React.
In general, React does not recommend working with elements directly. In case you’re certain that it is necessary, you can create a ref to store reference to React element.
The ability to use Javascript also allows you to get query params from the URL in React.
Conclusion
In this article, we discussed three different ways to customize the appearance of React web applications. Choosing the best one depends on circumstances of your project. Also, this blog post discusses how to apply conditional className values. We didn’t have time to go over that.