Struggling to incorporate a variable into a CSS module class name in Next.js. Finding it challenging to determine the correct syntax.
The variable is fetched from the API:
const type = red
Here's how I'm attempting to achieve it:
<div className={` ${styles.background} ${styles.--type}`}></div>The desired outcome:
<div className={` ${styles.background} ${styles.--red}`></div>Any suggestions on how to accomplish this?
Uncertain of your desired outcome.
Consider this approach:
const category = 'red';
<div className={`${styles.background} ${styles.category}`}></div>
Alternatively, if adopting BEM with the -- convention is preferred, transitioning to bracket notation may be necessary.
const category = '--red';
<div className={`${styles.background} ${styles[category]}`}></div>
Is there a way to prevent the blue div from overflowing the red div, but still always fill its parent container? I searched on stackoverflow and found suggestions to use height: 100%, but this causes issues when the child element has padding. How can this ...
I am encountering an issue with 3 inline <div> elements where the one on the far left is not displaying the light blue background and black border that it should have. HTML: <!DOCTYPE html> </html> <head> <link rel= ...
I've integrated the react-datepicker library in portal mode. While it functions well on browsers, I encounter an error when using mobile browser mode. An issue arises stating: "Unable to preventDefault inside passive event listener invocation" Des ...
While creating a website in Dreamweaver CC, I noticed a significant gap between my image and a div tag. Here is a screenshot for reference: Below is the code from my index file: <!doctype html> <html> ... </div> Additionally, here is a ...
https://i.sstatic.net/hAUps.png <nav class="navbar navbar-expand-lg navbar-dark "> <a class="navbar-brand" href="">Tindog</a> <button class="navbar-toggler" type="button" data-t ...
Currently, I am in the process of building a blog with ReactJS and NextJS within VS Code. Despite not encountering any errors during coding, when I attempt to run it, the browser displays: "TypeError: Cannot read properties of undefined (reading 'map& ...
When I click on the play icon, it changes to the pause icon. However, I am only able to change the first icon from play to pause in my JavaScript code. How can I apply this functionality to all the audio elements on the page? let playIcon = "https://ima ...
Currently, I am facing an issue while trying to establish a reference using the useRef hook and then applying this reference to a React-router Link. In my useEffect hook, I am attempting to access the current attribute of my ref, but it always returns as u ...
Seeking help with resolving the following errors: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: x npm ERR! Found: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1 ...
I have encountered an issue in my React app where I am trying to copy text from a card when the user clicks on it. The app displays multiple cards by looping through an array, so there can be any number of cards (n). The problem arises because the React a ...
Currently, I am exploring the possibility of switching CSS styles using jQuery through a simple if condition. Is there an easy method to switch styles based on IDs? In my case, I have two CSS blocks each with different IDs. Here is an example: <style ...
Currently, I am working with version 13.4.5 of next.js and utilizing API Route functionality. Below is the code snippet for section (1) where I am attempting to retrieve data by making use of swr. However, upon accessing "http://localhost:3001/api/company/ ...
I have created a static website for my upcoming JS application that is styled using tailwind CSS. I am utilizing it as a CDN or content delivery network. The website functions perfectly fine on the local development server (localhost). However, when it com ...
Encountered an error when trying to create a HOC using a function component instead of a class component Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. [Fri Oct 16 2020 24:17:29. ...
I am trying to achieve a 2-column layout with both columns at the same height. This is how it currently appears: And this is how I want it to be: Here is my code snippet: html { background-color: lightblue; font-family: Tahoma, Geneva, sans-serif ...
There are multiple div blocks within a parent block: one for the menu on the left, and one for the text on the right. How can you make the right inner block stretch to the full height of the parent block like the left one? The parent block has a minimum he ...
Recently, I encountered an issue where the text in select options is not centered in Chrome. Interestingly, using text-align: center on the select element works perfectly fine on Firefox, but fails to do so on Chrome. I haven't had the chance to test ...
I am currently using Context Hooks to manage states in react native. My goal is to initialize the state by calling an async function that makes an API request and then return the initial state using useState. I attempted to set the initial state for "tou ...
When the window is opened at full size, everything looks fine. However, when you resize the window horizontally, the thumbnails shift and disappear. I want them to remain fixed in their position like the large pop-up image so that users can still see them ...
I have a Teams React app, but ever since the last Chrome update, I haven't been able to save the authentication token in local session with MSAL. Here is my configuration: MSAL-broswer: 2.38.1 Chrome version: 117 MSAL-configuration: ` { auth: { ...