Using SCSS to apply a class in Next.js

Question

Using SCSS to apply a class in Next.js

Currently, I am working on a project using Next.js and implementing the SCSS module procedure for styling.

An example component directory structure is as follows: SampleComponent -> index.tsx and SampleComponent.module.scss

The code in SampleComponent.module.scss:

.box {
    // Some CSS (let's call it set1)
    &.disabled {
        // Other CSS (let's call it set2)
    }
}

In the index.tsx file:

import styles from './SampleComponent.module.scss'

<div className={styles.box}></div>

How can I incorporate the disabled class here?

Thank you in advance!

javascript css reactjs sass next.js

Answer 1

Answer №1

If you're looking to apply both the 'box' and 'disabled' classes to your div element, there are a couple of ways to achieve this. One option is to use template literals like so:

<div className={`${styles.box} ${styles.disabled}`}></div>

Alternatively, you can concatenate both classes into a single string variable:

let classes = styles.box + ' ' + styles.disabled

And then apply it to your div element like this:

<div className={classes}></div>

Answer 2

If you're looking to apply both the 'box' and 'disabled' classes to your div element, there are a couple of ways to achieve this. One option is to use template literals like so:

<div className={`${styles.box} ${styles.disabled}`}></div>

Alternatively, you can concatenate both classes into a single string variable:

let classes = styles.box + ' ' + styles.disabled

And then apply it to your div element like this:

<div className={classes}></div>

Answer 3

Answer №2

If you're looking to simplify your CSS classes, consider using the classnames package. Check out the classnames package here

<div className={classNames(styles.box, styles.disabled)}></div>

Alternatively, you can achieve the same result by combining classes like this:

<div className={`${styles.box} ${styles.disabled}`}></div>

Answer 4

If you're looking to simplify your CSS classes, consider using the classnames package. Check out the classnames package here

<div className={classNames(styles.box, styles.disabled)}></div>

Alternatively, you can achieve the same result by combining classes like this:

<div className={`${styles.box} ${styles.disabled}`}></div>

Using SCSS to apply a class in Next.js

Answer №1

Answer №2

Similar questions

ReactJS encountered an error: Module '@progress/kendo-scheduler-react-wrapper' could not be located

tips for efficiently using keyboard to navigate through tabs in an unordered list

What is the best method to update numerous low-resolution image sources with higher resolution images once they have finished loading?

Utilizing Node.js within a closed intranet environment

Tips on deleting excess space in between Material-UI Grid Rows

Navigating out of a Modal in React: A step-by-step guide

What is the best method to remove the gap between my two horizontal div elements?

Creating a custom progress bar using Javascript and Jquery

What is the reason for next.js to execute getStaticPaths each time a page is loaded?

Creating a container component that has access to the values of its children: a step-by-step guide

Is it possible to showcase a close symbol and a checkmark symbol simultaneously within a material ui chip component?

Angular not updating the values in real time

Creating a column heading that appears at the top of each column break with the help of CSS column-count

Try utilizing an image to hold text content rather than a traditional div container

Mastering the art of seamless navigation within a single page through the magic of

Issue with Backbone collection not being updated despite making a JSONP request

Transferring a JavaScript variable to PHP using Ajax within the same webpage

A guide to adjusting the width without affecting the td element

Troubleshooting: Why is the Kendo React TreeView CheckBox malfunctioning

Incorporating an NPM module into a React file: Webpack encounters resolution issues