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 moving one div above or below another div using the scroll bar?

Change the position of a Div by clicking on a different Div using JQuery for custom movements

Is it possible to arrange elements in CSS based on their attribute values?

Tips for maintaining a website within a 960px width while stretching the background on the x-axis

How to Turn Off Hover Effect in Essential Grid for Mobile Devices

Guide to dynamically updating Material UI component props based on the URL parameters

Is it possible to pass multiple API props to a NextJs Page at once?

A more sophisticated approach to button creation, such as utilizing a single HTML element

Utilizing the useSearchParams() function to retrieve live data in Next.js

"Revealing the specific row and column of the selected element in each table when hovering over it

Attempting to trigger CSS transitions using JavaScript will not be successful

Error Alert: JQuery Pop Up Issue

Images that adapt to various sizes while maintaining a consistent visual hierarchy

Creating HTML tables with consistent vertical lines and broken horizontal lines

What is the process for retrieving information from Sanity?

How can I position divs in a way that the top right corner of the child div touches the bottom left corner

Unable to retrieve real-time data from Firestore using getStaticPaths in Next.js

Tips on converting Nextjs generated Prisma types case from snake_case to camelCase

Creating a cell in HTML/CSS with wrapped data

Creating fluid designs for my boxes with CSS to enhance responsiveness