Styling React components

Styling React components is one of the important parts of building components and there are different techniques for setting styles. In this article, we’ll demonstrate approaches like:

• Inline styling
• CSS Modules
• CSS in JS

We’ll see what these approaches are all about, the pros/cons of each and how to work with them.

Inline styling

React allows you to add CSS directly to your code as attributes, and pass it to elements. In React, inline styles are written as an object. The key of such an object is the name of the style, the object name is written in camelCase. Style values are written inside the object, usually as a string.

Example:

 
const Button = () => {
   return (
       <button className={{backgroundColor: 'blue', color: 'white'}}>Click here</button>
   )

You can pass styles directly or create a variable that will store the properties of the styles and pass them to the element. Using inline styles, you can combine CSS syntax and JSX code.

 
const buttonStyle = {
   background: '#3022ee',
   color: '#ffffff',
   border: 'none',
   padding: '8px 20px',
   cursor: 'pointer',
}
 
const Button = () => {
   return (
       <button className={buttonStyle}>Click here</button>
   )
}

Pros: Fast and easy-to-use way. Especially good for small adjustments.

Cons: Not suited for a scalable application. There is no support for media queries, pseudo-classes

CSS Modules

The concept of this approach is that each React component receives a CSS file that is local to that component. The import statement in a JavaScript file loads a CSS file and converts it to an object and each class name from a CSS file is a property of an object.

To use CSS modules you need to:

1. Create a file with a typical naming convention for a CSS file, but insert module before .css, for example [fileName].module.css
   
2. Add CSS classes, styles to this file

3. Import the module you’ve just created into the component file you want to style
4. To use a class defined in your module, just refer to it as a normal property from the styles object

Rendering the component will produce a markup something like:

<button class=”Button_button__2Ce79″>Click here</button>

So in local scope class is called button, but after compiling it becomes Button_button__2Ce79 This means the class names will have a unique name and will not generate conflicts in the global scope.

Pros: No conflicts, easy to use and refactor. Plus, they support everything you need in CSS.

Cons: Harder to read and understand the DOM

CSS in JS

The concept of CSS in JS is abstracting CSS to the component level. It uses Javascript to assign styles in a declarative and maintainable way.

This approach uses JavaScript’s template literals to connect between components and styles. So, when you create a styled component, you’re actually creating a React component with styles

Popular libraries for using CSS in JS to style your components: Styled Components, Emotion, Radium and many more. And in the example below we’ll use Styled Components for demonstration

This is a very simple example that demonstrates the basics. All libraries have a lot more features – for example, using themes, dynamic props, server-side rendering and much more.

Pros: A component approach to CSS – no need to have lots of CSS files. Elimination of unused styles

Cons: Usage of additional libraries, which causes an increase in page load time.

 
import React from "react";
import styled from "styled-components";
 
const Button = styled.button`
   background: #3022ee,
   color: #ffffff,
   border: none,
   padding: 8px 20px,
   cursor: pointer
`;
 
const ErrorButton = styled(Button)`
   background: red,
`;
 
const Component = () => {
   return (
       <div>
           <Button>Primary button</Button>
           <ErrorButton>Error button</ErrorButton>
       </div>
   )
}
 
export default Component;

Conclusion

There is no one correct way to style components. The styling method must be chosen based on the specific case and personal preferences.

Launching a new JavaScript project? Need help on an existing project? Work with us