Ways to access a DOM element in Next.js when the class name is dynamically generated

Question

Ways to access a DOM element in Next.js when the class name is dynamically generated

I am currently developing a Next.js app (version 12.1.0) and facing an issue in my Nav component. I am attempting to select a DOM element using

const nav = document.querySelector('.nav');

However, this is triggering an error message:

TypeError: Cannot read properties of null (reading 'classList')

This problem arises because the element is being rendered as

<div class="Nav_nav___cOea"></div>

instead of having the '.nav' class that matches my CSS styles.

My CSS is written using css modules and sass within the Nav.module.sass file (which loads without any issues), but once rendered, it uses a different class name than expected. How can I target the rendered element correctly? Or is there a way to prevent next.js from generating random class names?

css sass next.js css-modules

Answer 1

Answer №1

To solve this issue, you can reference the class in the querySelector method like this:

const navigation = document.querySelector(`.${styles.navigation}`);

This assumes that styles have been imported as follows:

import styles from '../styles/Navigation.module.sass';

This solution is based on the approved answer provided for this question: How do I select my CSS module class using document.querySelector?

Answer 2

To solve this issue, you can reference the class in the querySelector method like this:

const navigation = document.querySelector(`.${styles.navigation}`);

This assumes that styles have been imported as follows:

import styles from '../styles/Navigation.module.sass';

This solution is based on the approved answer provided for this question: How do I select my CSS module class using document.querySelector?

Ways to access a DOM element in Next.js when the class name is dynamically generated

Answer №1

Similar questions

What is the method for adjusting the right padding of the MUI Autocomplete Input field?

What is the best way to ensure all table rows have consistent heights that are not affected by image sizes?

I'm having trouble getting Firefox to recognize the percentage height set on table rows. Any suggestions for a workaround?

generate a flexible div that adjusts its height based on the size of the browser window

Utilizing Next.js to Manage Back Button Functionality

What is the best way to remove table cells from a TableBody?

Is there a way to target a child element for hover effect in CSS without affecting the parent element?

Align the center of a grid div that does not contain any items

FIREBASE_AUTHCHECK_DEBUG: Error - 'self' is undefined in the debug reference

Using Next.js to fetch data with Suspense

What could be causing "Unknown property" errors when using unicode property escapes?

Is there a way to prevent the slide-out bar from automatically hiding when selecting an item from its list?

Using CSS to Put Text in the Back of Other Text

The persistent space between the navbar and the index page remains despite the suggested fixes provided

Utilize flex to position content at the bottom

Issue encountered: difficulty with vertical alignment in table cell containing both text input and image

Autocomplete feature seems to be functioning properly in the online demonstration, while it does not seem

What steps can I take to prevent my JavaScript code from interfering with my pre-established CSS styles?

What is the best way to reveal CSS files downloaded via npm?

Combining Multiple Middlewares in Next.js