The CSS class names for Next.js have not been defined yet

Just getting started with next js and trying to use css modules for styling my nav component. However, I noticed that the classname I setup for the nav element is not showing up in the rendered DOM. Even though I can see the generated styles by webpack in the "head" tag, the classname is missing on my nav tag.

import React from "react";
import styles from './NavigationContainer.module.scss';

type Props = {};

const NavigationContainer: React.FC<Props> = ({children}) => {
    return <nav className={styles.mainNavigationContainer}>{children}</nav>
};

export default NavigationContainer;

https://i.sstatic.net/Rfld5.png https://i.sstatic.net/blYES.png

Answer №1

When working in JavaScript, it's important to avoid using the hyphen symbol (-) as a variable name, as it is typically interpreted as subtraction in mathematical operations.

To ensure that Next.js applies the correct CSS styles, consider renaming the CSS selector to .mainNavigationContainer.

The JavaScript code itself does not need to be altered.

For more information on adding component-level CSS support, refer to this link.

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

Trying to incorporate a PHP echo statement into the innerHTML of a button is ineffective

I have a piece of jQuery code that is not functioning as expected: $("#erase").click(function(){ $("#erase").attr("disabled", "disabled"); // Prevent double-clicking $(this).html("Erasing..."); $.post("erase.php", {target: $("#targ ...

The FindProxyForURL function in a pac (proxy-auto-config) file is not compatible with the IE browser

After struggling for three days, we are still unable to solve a peculiar technical issue and now seek your assistance. The PAC (Proxy Auto-Config) file we have created works flawlessly in all browsers except for Internet Explorer (IE). The URL in questio ...

Retrieve next-i18next translations beyond the current page or component

Currently working on a project using Next.JS and Typescript, I am looking to incorporate next-i18next translations outside of the page/component. The goal is to localize validation messages within a separate utility class that defines the validation engi ...

Is it possible to utilize a keyboard listener to activate a tooltip upon being invoked?

I've created a basic pie chart that shows a tooltip when you click on a pie wedge. Now, I want to achieve the SAME functionality, but for div elements located OUTSIDE of the pie chart. Situation: A user focusing on the 'Cat 1' div and ...

What is the most effective method for incorporating keyframes using JavaScript in a dynamic way?

Is there a way to animate an HTML element by using a variable with keyframes, but without directly manipulating the DOM? Below is the HTML code: <div class="pawn" id="pawn1"></div> Here is the CSS keyframes code: @keyframe ...

What is preventing the element from being positioned at the bottom of the container?

I have a vertical bar chart with 5 different colored sub-containers. I'm trying to position the 'chicken' sub-container at the bottom of the bar without any bottom-margin, but so far my attempts have been unsuccessful. When I try using absol ...

Developing a custom JavaScript function to iterate through a group of html elements

In my mission to create a function that loops through a set of HTML elements and gathers their values, I aim to then utilize those values to produce an HTML textarea. Thus far, I've established a series of HTML input boxes and a JavaScript function f ...

The correct way to write media queries in CSS for the iPhone

After successfully formatting a website for various devices using an online responsive design tester and CSS declarations like @media only screen and (max-width: 480px), I encountered an issue during testing on an actual iPhone. The browser was not computi ...

How can you hide a component within material-ui to prevent it from rendering?

I have been successfully using nextJS and material-ui together, but I have encountered a recent conceptual issue. When the application renders on the server, I want to avoid any reflow once it is loaded on the client side. To handle layout differences ...

Creating environmental variables for production using AWS Amplify and Next.js

Having trouble accessing an API endpoint with my API key in my Next.js app. The key is stored in .env.local like this: API_KEY=qwerty123 I retrieve the key in my getStaticProps function using process.env: const parkData = await fetch( `${URL}parks? ...

The CSS background image is not functioning

.menubar li { float: left; width: 115px; text-align: center; background-image: url(js/left_main_bg_image.gif); } Having issues with the background image not displaying properly in IE, Firefox, and Chrome. I've tried adding it to a tab ...

Database-Driven Ajax Information Display

https://i.sstatic.net/GE8RI.pngI retrieved some data from the database and successfully displayed it after an ajax call. However, one of the variables contains array data that was saved using the implode function. The data looks like (a,b,c,d). The curren ...

What is the proper way to specify the type for the `clean-element` higher-order-component in React?

Error message: 'typeof TextareaAutosize' argument cannot be assigned to a type 'Component<{}, {}, any>'. Error: Property 'setState' is not found in 'typeof TextareaAutosize'. Here is the code snippet causin ...

Error: The specified module 'sqlite' does not have an export named 'default' as requested

Having some difficulty with importing sqlite into my project. When I add this line: import sqlite from 'sqlite'; An error occurs: file:///D:/WebPro/WebProg/cwCode/dbInteract.js:2 import sqlite from 'sqlite'; ^^^^^^ SyntaxError: ...

What is the best location to store the JWT bearer token?

Exploring options for storing JWT tokens in a Bearer header token for my application. Looking for the most efficient storage mechanism. Would love some insight on how to accomplish this using jQuery. Any recommendations for a secure method? ...

The alignment of the pagination in Mui datatables is currently not functioning

Currently, I am utilizing mui-datatables v ^4.2.2 with react and react-dom 17.0.2 alongside @mui/material v5.10.15. Upon displaying the datatable, I have noticed that my pagination alignment appears to be distorted: https://i.stack.imgur.com/Fhed7.png T ...

Differences between using Array.from and a for loop to iterate through an array-like object

When traversing an array-like object, which method is more efficient for performance: using Array.from( ).forEach() or a traditional for loop? An example of an array-like object would be: let elements = document.querySelector('#someid').children ...

Deciphering a JSON array by value or key

I have a JSON array that I need to parse in order to display the available locations neatly in a list format. However, I am struggling with where to start. The data should be converted to HTML based on the selected date. In addition, a side bar needs to s ...

NextJS allows for custom styling of Tiktok embeds to create a unique and

Currently, I am in the process of constructing a website that integrates Tiktok oEmbed functionality. Thus far, everything is running smoothly, but I have encountered an issue - how can I customize the styling to make the body background transparent? I ha ...

Preserving quotation marks when utilizing JSON parsing

Whenever I try to search for an answer to this question, I am unable to find any relevant results. So please excuse me if this has been asked before in a different way. I want to preserve all quotation marks in my JSON when converting from a string. In m ...