How To Combine CSS Module Classnames In React

Sep 20, 2019 | 3 min read

React Styling Components SCSS

Featured Image

Photo by Clint Adair on Unsplash

I'm in a habbit of using css/scss modules while creating apps with create-react-app. It has become popular with React Developers because , with css/scss modules you can define class names that are very specific to a single React component without cluttering the global css scope.

Lets Look at an exmaple

Suppose you have component called Name

Name.js
import React, { Component } from "react";

import { name } from "./name.module.scss";

export default class Name extends Component {
  render() {
    return (
      <div>
        <h1 className={name}>Shehan Disanayake</h1>
      </div>
    );
  }
}

and you have defined some styles in name.module.scss.

name.module.scss
.name {
  text-align: center;
  color: tomato;
}

.divider {
  position: relative;
  &:after {
    content: "";
    position: absolute;
    width: 50px;
    height: 4px;
    border-radius: 5px;
    background: tomato;
    bottom: 20px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }
}

If you want to use 2 class names for the h1 element in Name component how will you do it? There are 2 methods that we can follow.

Method 1 (Using Template Literals)

Template literals is a ES6 features and it can be used to spread what is inside variables. Lets see how we can use it to combine two classes.

Name.js
import React, { Component } from "react";

import { name, divider} from "./name.module.scss";

export default class Name extends Component {
  render() {
    return (
      <div>
        <h1 className={`${name} ${divider}`}>Shehan Disanayake</h1> //Template Litels
      </div>
    );
  }
}

Method 2 (Using classnames npm package)

There is a specific npm package that is built to help with combining class names together. It's called classnames. Now lets add it to our project wih yarn.

$ yarn add classnames

classnames npm package consist of a default export, therefor we will import it to our component as classnames and we have to pass all classnames that you want to combine into classnames() function as arguments, then it returns the combined class name as a string. Below you can see the Address component.

Address.js
import React, { Component } from "react";
import classnames from 'classnames';
import { name, divider} from "./name.module.scss";


export default class Name extends Component {
  render() {
    return (
      <div>
        <h1 className={classnames(name,divider)}>Shehan Disanayake</h1> //Classnames npm package
      </div>
    );
  }
}

Below are the Address styles.

address.module.scss
.address {
  text-align: center;
}

.divider {
  position: relative;
  width: 400px;
  margin: 0 auto;
  &:after {
    content: "";
    position: absolute;
    width: 50px;
    height: 3px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.2);
    bottom: 50%;
    right: 0;
  }

  &:before {
    content: "";
    position: absolute;
    width: 50px;
    height: 3px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.2);
    bottom: 50%;
    left: 0;
    right: 0;
  }
}

Live Demo

The Name component styles are applied with the help of Template literals and the Address component styles are added with classnames npm package.

Conclusion

I hope that you have learned how you can combine classnames using Temaplte literals and using a thirdparty npm package called classnames. This is not a super cool app idea,but I just wanted to share methods that I often use and encounter when creating apps and hope this small trick will help you in someway. I will see you in the next article. Till then happy coding.