Utilize CSS Module class names through direct DOM access

I have a unique situation involving a component that utilizes CSS-Modules through the babel-plugin-react-css-modules plugin.

During certain points in the component's lifecycle, I need to calculate new dimensions by directly accessing the DOM.

Within my SCSS stylesheet, there is a class called .full-width that I need to temporarily apply to the component's DOM element for calculations before removing it.

Since adding and removing the class quickly does not impact the component or its state, I prefer to manipulate the class directly on the DOM without involving the component's state object.

When I use this.DOMReference.classList.add('full-width'), it adds the full-width class to the element. However, I want to add the modularized version of the class as applied by styleName="full-width" (e.g., Component__full-width___Pjd10)

Is there a way to achieve this without globally declaring .full-width?

Can react-css-modules help me with this scenario?

cssreactjscss-modulesreact-css-modulesbabel-plugin-react-css-modules

Answer №1

After some experimentation, I discovered a more efficient way to import styles in my project. Instead of importing them anonymously, I can now assign them to a variable like this:

import styles from './styles.scss'
instead of import './styles.scss'. This allows me to easily reference the styles when needed

this.DOMReference.classList.add(styles['full-width']);

I also realized that I don't need to use styleName="styles.someClass" anymore. I can simply use styleName="someClass" (as long as only one stylesheet file is imported, otherwise the former method is necessary)

Answer №2

Implementing in Next.js

When incorporating this code into your Next.js project, it functions seamlessly.

Utilize CSS Modules

import design from './design.module.css'

Incorporate within your Function

element.classList.add(design['full-screen'])

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

What causes the burger dropdown to be concealed by additional content?

While viewing my menu on an iPhone SE in responsive mode, I noticed that all of my burger menu items are hidden except for the one that fits perfectly in the space between my header and main content. https://i.sstatic.net/7K9FD.png I am using Mantine wit ...

cssreactjsnext.jsoverflowmantine

Integrating Next.js with a authentication provider and a Redux provider

During the development of my Next js project, I incorporated Next auth using import {Provider} from 'next-auth/client' to wrap the <Component /> in _app.js. However, I also want to integrate Redux into the project. This involves importing ...

javascriptreactjsreduxnext.jsnext-auth

Issue with parsing date in Moment-timezone

I'm encountering some puzzling issues with moment-timezone. Even when using just Moment, the problem persists. This is within a react component in a next.js project. Here's my code snippet: useEffect(() => { const test = moment.utc(' ...

reactjsnext.jsmomentjsmoment-timezone

Attempting to create an OutlinedInput with a see-through border, however encountering strange artifacts

https://i.sstatic.net/PL30l.png Struggling to achieve a TextField select with outlined variant and a see-through border. Here's the current theme override I'm using: overrides: { MuiOutlinedInput: { root: { backgroundColor: &ap ...

cssmaterial-uijss

The Angular ng-style feature is responsible for applying a style attribute that is subsequently not maintained in proper sync

My angular website retrieves data from a Web API as its back end. Initially, a generic background is displayed. However, after the user logs in, the background image URL specific to the customer is fetched and utilized in the ng-style attribute. Upon the ...

htmlcssangularjsng-style

On the first load, Next.js retrieves a token from an API and saves it for later use

Currently working on an application with next.js, the challenge lies in retrieving a guest token from an API and storing it in a cookie for use throughout the entire application. My goal is to have this token set in the cookie before any page is loaded. H ...

javascriptnode.jsreactjsnext.jsserver-side-rendering

The video element in HTML5 is not showing up on Safari browsers, but it is functioning properly on Chrome

I have set up a video slider on my webpage. You can view the site The code is functioning perfectly on Chrome and iOS Safari, but there seems to be an issue on desktop browsers. When inspecting the page in Safari, the video elements are present in the HTM ...

javascriptcsssafarihtml5-video

Issues with Firefox's -moz-placeholder functionality were observed not being functional as

I'm having trouble styling this placeholder in Firefox 13.0.1 Here is the input field with a placeholder: <input class="textFieldLarge" placeholder="Username" id="username" name="username" type="text" /> This is the CSS associated with it: . ...

csshtmlfirefox

What is the best way to interact with all the rendered DOM elements in React that were created using the map method

return <div> <div >{'Audios'}</div> {urls.map(url => <div > <audio controls src={url} ref={(element) => this.audioRefs.push(element)} /> </div>)} </div>; I a ...

javascripthtmlreactjsfrontend

Is there a way to trigger the opening of a new file or page when a CSS animation comes to an end?

Is there a way to delay the loading of a function or page until after an animation has finished running in JavaScript, HTML, and CSS only? For instance, I'd like to run an animation first and then have a different website or content load afterwards fo ...

javascripthtmlcss

Stopping setTimeout when leaving the current page: Is it possible?

Good evening, I am looking for advice on how to cancel a setTimeout function when a user navigates to other pages (for example, by clicking other links or pressing the back button in the browser, but not by changing tabs). I have attempted to use the windo ...

javascripthtmlcssreactjssettimeout

Retrieve the pdf document from the server's response

Currently, I am working on a project where I am using PHP Laravel to create a docx file, converting it to PDF, and saving it in a public server folder. Afterwards, I send the file as a response to the client. On the client side, I am attempting to downloa ...

javascriptreactjs

What is the process for changing and updating the key of an object based on comparisons with other objects?

My task involves working with an array of objects that contain unique IDs as keys. const sampleObj1 = {0011:[{},{}], 0022:[{}, {}], 0033:[{},{}]} const sampleObj2 = [{id:0011, name:'test1'}, {id:0022, name:'test2'}, {id:0033, name:&apos ...

javascriptnode.jsreactjsecmascript-6

What is the best way to incorporate the output of an API into a CSS container?

How can I integrate the API field value result into the CSS container? Your guidance on how to proceed would be greatly appreciated. Hope you have a wonderful day! head <style> .container { background-color:#fff; border-radius:20px; padding:100px ...

htmlcss

Saving the state to Redux within the handleSubmit function of a Formik React form

After submitting a Formik react form, I need to retrieve data via Ajax and set it as a variable in the redux store import React from 'react'; import {connect} from 'react-redux'; import { withFormik, Form, Field } from 'formik&apo ...

reactjsreact-reduxformik

Is the CSS property `backface-visibility` causing compatibility issues across different browsers with animations?

I have created a unique flip animation that displays new numbers resembling an analog clock or calendar with a hinge in the middle. The process is simple: using a div, I have: The bottom half of the first number on one side The top half of the second num ...

htmlcsscross-browsercss-animations

Encountering issues when trying to import const enums in a webpack project using babel

Currently, I am working on a react project that was initially created using create-react-app. However, we later ejected and made extensive modifications to the webpack configuration. My current struggle lies in importing const enums from external libraries ...

reactjstypescriptwebpackbabel-loader

Embed the CSS from the iframe

** This question is purely hypothetical ** Imagine I have a website with the following code: <head> <style> body { background-color: red; } </style> </head <body> <p>blah</p> </body> If I were to embed th ...

htmlcssiframe

Can you give me some insights about what an Action Creator is?

function createRefDoneAction(widgetsArray: widget[]): WidgetAction { return { type: actionTypes.REFRESH_WIDGET_DONE, widgets: widgetsArray }; } Could you please clarify the necessity of having two sets of parameters (e.g. 'wid ...

reactjstypescript

Why is it that every time I try to execute this function, my table fails to populate as expected?

I'm having trouble creating a table with 2 rows, each row containing 4 cells that should display an image. However, when I try to execute my function, nothing seems to happen. Can you help me troubleshoot? function generateTable() { var table = d ...

javascripthtmlcssweb