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

Guide to configuring capybara-webkit for testing ajax requests and capturing screenshots containing HTML with loaded CSS and JavaScript

Leverage the selected values to dynamically generate a table using jQuery

Automatically submit upon selecting an option

Is there a way to utilize the passValue function twice within Javascript?

Problematic: BS4 Cards cannot be accommodated within the parent div.Improved: The

Encountering the 404 Not Found error when trying to fetch the Next.js API Route from the app

Measuring the quantity of 'table' elements with jQuery

When scrolling the page, the Circle Mouse Follow feature will dynamically move with your cursor

Remove the div of the previous selection in jQuery and add the current selection by appending it, ensuring only one selection per row is allowed when

Which Web Browsers Support Canvas and HTML5?

The process for incorporating two distinct Google fonts into a Next.js project using Material UI

Struggling with implementing a personalized zoom feature in React-Leaflet?

Struggling to make Cypress react unit testing run smoothly in a ReactBoilerplate repository

Form data is not being displayed by the Private Params method

Node.js server experiencing delays due to V8 processing constraints

Tips for preserving scroll location on Angular components (not the window) when navigating

How can I effectively develop a versatile user interface for a website using Ruby on Rails that is compatible with all

Animating CSS with jQuery for a background image effect

I possess an item, but unfortunately, I am only able to save the first object from this possession

Modify the selected toggle buttons' color by utilizing the MUI ThemeProvider