Decorating Your Components – Styling in React

In web development, the presentation holds the same significance as functionality, and you will realise this more as your user interfaces become more intricate. To create visually appealing interfaces, styling your components is highly crucial so the audience does not get bored. In React, there are various ways to style your components. But, since we are on a beginner's level, we will only learn the two fundamental approaches, namely, inline styles and CSS modules, to style our components in this article.

Inline Styles: Direct Styling in CSS

Unlike traditional CSS, when it comes to styling the JSX components with inline CSS, we define the classes prior to defining the components and assign them to the components using the style props. It is the most direct approach to styling React components. Instead of creating a separate CSS file, we define styles as JavaScript objects within the components.

To understand this, let's create a new project named ReactStyles.js and add the following code to it:


import React from 'react';

function ReactStyles() {
  const styleButton = {
    backgroundColor: 'grey',
    color: 'white',
    borderRadius: '3px',
  };

  const styleHeading = {
    fontSize: '18px',
    color: 'blue',
    textAlign: 'center',
	backgroundColor: 'grey',
  };

  return (
    <div>
      <h1 style={styleHeading}>Welcome to React Styles!</h1>
      <button style={styleButton}>Go -></button>
    </div>
  );
}

export default ReactStyles;

In the above code, I have defined styles as constants so they cannot be changed intentionally or accidentally throughout the program. First, I have defined some styling for the buttons using the CSS properties in camelCase (backgroundColor instead of background-color). Similarly, I have defined styles for the heading. In the return statement, I declared a heading and a button and used the style attribute to call the styling classed on them. Finally, the program returns the component.

Now, in App.js, import and call this component as follows:


import React from 'react';
import ReactStyle from './ReactStyles';

function App() {
  return (
      <ReactStyle/>
  );
}

export default App;

This is how our component is rendered:

Although this approach seems super simple and easy, it comes with its benefits and trade-offs, which I will mention below:

Advantages of Inline Styling

Inline styling allows you to apply unique and dynamically generated styles to specific elements quickly.
The styles are inherently scoped to the specific elements, reducing the chances of naming collisions.
You can easily implement dynamic styling by using the component state and props to determine the inline style values.

Disadvantages of Inline Styling

The inline styling reduces your code readability and maintainability when it comes to complex styles. The code becomes cluttered and harder to read and maintain as the complexity of styles increases. Therefore, separating the styles and logic is considered a better approach.
The inline styles lack the support for the advanced CSS features like pseudo-classes and media queries.
You need to define the same code multiple times to apply the same styling to multiple elements. This leads to code duplication.
Some CSS properties do not work at all or generate unexpected results.

Considering all the disadvantages mentioned above, you may want to use the other approach that is considered the best for beginners, i.e., CSS Modules.

CSS Modules: Maintainable Styles

As the React projects grow, handling the CSS styles becomes challenging since the global styles generate naming collisions, leading to the styles intended for one component affecting the others. In such situations, the CSS Modules offer a more manageable approach, i.e., automatically scoping the class names locally to the component in which they are used. The CSS modules are generally pre-configured in Create React App (CRA) and other modern React build tools. In this approach, you define all the styling in a separate file using the general CSS syntax. You only need to name your CSS file with the .module.css or .module.scss extension.

If you do not use the CRA, you might need to configure the build process using Webpack with css-loader and its modules. However, you do not need to worry about it since we already use CRA to create our projects.

Creating a CSS Module

Before using a CSS module, we need to create it. Let's set up a CSS module by creating a new file and saving it as ComponentStyles.module.css. Add the following code to your file:


/* ComponentStyles.module.css */
.title {
  font-size: 24px;
  color: red;
  text-align: center;
  background-color: black;
}

.mainBtn {
  width: 150px;
  height: 50px; 
  margin: 5px;
  background-color: light-gray;
  color: navy;
  border-radius: 3px;
}

.secondaryBtn {
  width: 150px;
  height: 50px; 
  margin: 5px;
  background-color: blue;
  color: white;
  border-radius: 3px;
}

Using the general CSS syntax, I have defined some styles for the title, primary, and secondary buttons in the above code.

Now, create a new project named ModuleStyles.js and add the following code:


import React from 'react';
import styles from './ComponentStyles.module.css'; // Importing the CSS Module

function ModuleStyles() {
  return (
    <div>
      <h1 className={styles.title}>Welcome to CSS Modules!</h1>
      <button className={styles.mainBtn}>Primary</button>
	  <button className={styles.secondaryBtn}>Secondary</button>
    </div>
  );
}

export default ModuleStyles;

In the above code, I have imported the CSS module that we created. In the return statement, I have defined a heading and assigned the title class to it. Similarly, two buttons are defined, and the corresponding classes are called. In the end, I have exported our component.

In App.js, call the component as follows:


import React from 'react';
import Module from './ModuleStyles';

function App() {
  return (
      <Module/>
  );
}

export default App;

Here is how our component looks when rendered:

Result of the code — How our UI looks when the code runs

From the above example, you can see how we imported the CSS file as styles and then used className={styles.classname} instead of className=”classname” to call the locally scoped class name in CSS module. This is what makes the CSS modules highly useful for styling the React components.

That being said, CSS Modules offer many more advantages, so let's discuss them briefly below:

Benefits of CSS Modules

The CSS modules allow you to prevent naming collisions via the automatic local scoping of class names. This ensures that the styles of one component never interfere with the styles of another component.
By separating the logic and styles, the code readability and maintainability are improved, and making changes is easier.
The styles on which a component depends are clearly visible when a CSS module is imported into a component.
Although it is for the local scoping, extending and composing styles from other CSS modules is still possible.

Other Styling Options

Besides inline styling and CSS modules, there are some other approaches that you might learn as you advance in React:
• Plain CSS Imports: You can use the regular CSS files in your component, but these styles are usually global. Therefore, you might need to define the naming conventions to avoid potential collisions in bigger projects. This approach is ideal for applying global styles or integrating with the existing CSS frameworks.
• Style Components: This is a library that allows you to write CSS directly within the JSX components with template literals. It handles scoping automatically and offers component-level styling. Although this is a powerful approach, it introduces another dependency with a somewhat different syntax than we have used.

Styling in React is not too difficult if you choose the right approach. Hopefully, you'll be able to implement it yourself with the help of the examples I've demonstrated in this article. In the next article, we will explore making HTTP requests in React. Stay tuned!