Take Your Components to the Next Level

How to Style Components in React

My mother worked for a car dealership, and once told me something that stuck with me all this time. “Features sell cars.” What she meant by this was that people are always looking for the small details and items that will enhance their experience, and this applies to web development as well.

Humans are visual creatures, and it only takes milliseconds to assess whether something is visually appealing or aesthetically appealing. When a web surfer comes across your website, their first impression will determine whether they will browse, trust, and engage with the site. Therefore, it is important to create web pages that are clean, crisp, and user-friendly. To do this, we have to work with Cascading Style Sheets (CSS), a concept familiar to virtually all web developers. Let’s go over a few ways to go about this, and build refreshing, beautiful websites and applications.

In this article, we will go over three ways of styling components, as well as their pros and cons.

• Inline Styling
• Styled Components Library
• CSS Components

Inline Styling

Inline Styling is what you will commonly see when you are first learning CSS, as it is easy to visualize when you are working with new styles in a component, and don’t want to flip back and forth from a master CSS file. A common example is styling a button using Inline Styling.

<button style={{
  color: 'blue',
  width: 11 rem
}}
>

As you can see, it does take up quite a bit of space within the component, and may not be as legible as if it were imported from an external file. However, the main benefit is that it is clearly visible within the file, and can be tweaked and modified within the component by a fellow developer who may not be familiar with the code. Naturally, when you are building large applications and working within a team, this can become very messy, very quickly. So, let’s see what we can do to improve upon this.

Styled Components Library

The Styled Components Library is an awesome tool to take your web application to the next level, and is very user-friendly. To install, simply run the following command:

npm install --save styled-components

Once installed, you can refer to the documentation at the site above. Here are a few examples of how to use it effectively.

import styled from 'styled-components'
const StyledButton = styled.button`
   width: 80%;
   color: blue;
`;
export default Button;

Now, there are a few things going on here, and I am sure that you noticed some unusual notation. Note that we are simply declaring a constant here, and then creating the desired attributes using simple CSS. What is really happening under the hood is the ‘button’ is actually a method being called on styled, and we pass it a series of simple string arguments, hence the back-ticks. Notice that we are also using semicolons to separate the arguments, because they are being passed individually. In this case, Vanilla JS parses the literal templates and passes the arguments to the button method, which produces JSX. Finally, there are no quotes around the actual arguments (width, color, etc.), which we would need when doing Inline Styling.

There are several more features that make Styled Components appealing. Firstly, using Styled Components creates a unique classname within the HTML, and is injected into the head. This ensures that there are no overlapping classnames, and also displays the CSS in one place, rather than within each element, like we would see with Inline Styling. Additionally, Styled Components can be used to include pseudo properties, like hover and focus.

import styled from 'styled-components';
const StyledButton = styled.button`
   width: 80%;
   color: blue;
   :focus {
     outline: none;
   }
`;
export default Button;

This component can then be imported into any other file.

CSS Components

Finally, we have CSS Components and Modules, which are my personal preference. In this approach, we create an external CSS sheet, in which we can define many classes and unique features therein. Generally, you will see a master CSS sheet, such as index.css. To me, this is a nice way of keeping the CSS code in one file, in which you can play off of existing styles, and simply use classnames within the individual elements, making inline styling superfluous.

.button {
  color: blue;
  padding: 10px 20px;
}
.button:hover {
  color: red; 
}

Additionally, you can add media queries to this file to make sure that your webpage is responsive. You can learn more about this here.

So, that should give you a cursory view of the mediums through which you can style your components to create great content. I hope this was helpful. As always, Happy Coding!