Understanding the usage of className in Next.js with CSS modules for styling components

Currently, I am exploring the world of Next.JS and finding it challenging to work with the syntax when dealing with component CSS modules inside HTML code in a .js file.

During a tutorial that I recently watched, they explained that:

<a className="btn"</a> 

this would then transform into the following using CSS module classes.

<a className={classes.btn}</a>

However, I am having difficulty understanding how to handle situations like this:

<a className='navbar-logo fab fa-typo3' onClick={closeMobileMenu}>Home</a>

or even this:

<i className={click ? 'fas fa-times' : 'fas fa-bars'} />

I am struggling to figure out the correct way to write the content within the className without any reference to classes. Any help or guidance on this matter would be greatly appreciated!

Answer №1

For those who are utilizing the CSS module, consider incorporating template strings for a more streamlined approach.

<a className={`${classes.navbar-logo} ${classes.fab} ${classes.fa-typo3}`} onClick={closeMobileMenu}>Home</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

TypeScript Redux actions not returning expected type

Basically, I am attempting to assign types to a group of functions and then match them in my Redux reducer. Here are the functions I have defined in actions.ts: export const SET_CART_ITEMS = "SET_CART_ITEMS"; export const SET_CART_TOTALS = "SET_CART_TOTA ...

Error in Typescript for a function that accepts several types of lists - property does not exist on the interface

In my project, I have defined three interfaces: a base interface and two others that extend the base one with children as properties. One of the interfaces includes 'valueType' while the other includes 'returnType'. Here is how they are ...

What are some ways to personalize web notifications?

I am looking for a way to easily send web notifications with custom input and control when they are sent, such as after submitting a form. I want to create a user-friendly interface for non-coders to use. Currently, I am attempting to set up a system wher ...

Is it possible to disable the "super must be called before accessing this keyword" rule in babelify?

My current setup involves using babelify 7.2.0 with Gulp, but I've encountered an error when working with the following code snippet: class One {} class Two extends One { constructor() { this.name = 'John'; } } The issue at hand i ...

Restrict the use of font styles to specific languages

Is there a unique method to enable fonts to support specific languages and have other languages automatically use the selected font-family: fonts? ...

Animated SVG Conversion (Icon to Scalable Vector Graphics)

I am having difficulty animating my SVG. I converted it from .ICO to .SVG using an online tool, but now I am unable to animate the strokedasharray and strokedashoffset properties. I've tried using fill but that hasn't worked. Below is my SVG code ...

What is the reason behind $(this).text() returning an empty string when clicking on an li element?

Can anyone explain why clicking on this element returns a blank string ""? function saveSelection() { var selectedValue = $(this).text(); // The value here is "" } This pertains to: <ul> <li data-bind="item" onclick="saveSelection();"> ...

Guidelines on programmatically adding a directive to a div element in AngularJS

var myApp = angular.module('myApp', []); myApp.controller('someController', function($scope) { $scope.click = function(){ alert("Hello there!"); }; }); myApp.directive('testInput',function(){ return { ...

Troubleshooting: Modules Missing in Electron/Vite Build

After completing the project, I encountered several issues. The error message indicates that it cannot find the modules newMessageHandler, axios, and crypto. I attempted to use path.join(__dirname, 'events/newMessage.js'); but then received an er ...

"Struggling with a Bootstrap problem in my Accordion Table

I'm working with a Bootstrap table that includes an accordion feature. My goal is to have the second row hidden by default. However, when I click to reveal it, the table shifts. How can I smoothly animate the opening without causing any shifting? ...

What is the method to include an origin in CORS for strapi v5?

I encountered a CORS error stating that the value of the 'Access-Control-Allow-Origin' header in the response cannot be set to '*' when the request's credentials mode is 'include'. This happened because the origin was mis ...

Converting a single 10GB zip file into five separate 2GB files with the help of NodeJS

var fs = require('fs'); var archiver = require('archiver'); var output = fs.createWriteStream('./test.zip'); var archive = archiver('zip', { gzip: true, zlib: { level: 9 } // Sets the compression level. }); ...

Troubleshooting problem in Java related to encoding with XMLHttpRequest

Currently, I am utilizing XMLHttpRequest for an ajax call to my server. Let's consider the call: http = new XMLHTTPRequest(); var url = "http://app:8080/search.action?value=ñ" http.open("GET",url,true); http.setRequestHeader("Content-type", "applica ...

Issue: Trouble with Rotating Tooltips in Javascript

I am facing a challenge with the tooltips on my website. I want to ensure that all tooltips have a consistent look and transition effects, but I am struggling to achieve this. The rotation and other effects applied using javascript are not functioning prop ...

Include a quantity dropdown menu on the cart page of your Shopify store's debut theme

Hey there! I'm currently customizing the Shopify Debut theme and I'm trying to incorporate a quantity selector as a dropdown on the cart page. Unfortunately, I'm encountering some issues with this implementation. I've managed to succes ...

When an HTML element extends beyond the screen's right boundary, it becomes truncated

My website utilizes a table to showcase some data, but there's an issue when viewed on smaller screens. The table gets cut off and not all the content is visible. Even after scrolling completely to the right, the rightmost field remains barely visible ...

Interactive calendar using Php and Javascript/Ajax

Currently, I am working on a PHP calendar and have integrated Javascript/Ajax functionality to enable smooth scrolling between months without the need for page refresh. Interestingly, the calendar displayed as expected before implementing Javascript/Ajax, ...

Node.js has the ability to establish internal connections, however it cannot establish connections

I'm having an issue connecting to a JavaScript file on my local server. I'd like to input the external IP address and port in order for it to run externally. This functionality currently works when accessed locally. Below is the code from my serv ...

The replacer argument of the JSON.stringify method doesn't seem to work properly when dealing with nested objects

My dilemma is sending a simplified version of an object to the server. { "fullName": "Don Corleone", "actor": { "actorId": 2, "name": "Marlon", "surname": "Brando", "description": "Marlon Brando is widely considered the greatest movie actor of a ...

Align the <div> vertically within the <td> tag

My current set up looks something like this: <tr> <td> <div class="blue">...</div> <div class="yellow">...</div> </td> <td> <div class="blue">...</div> <div class="yellow ...