Next.JS CSS modules are experiencing issues with functionality

Organizing the CSS structure for a project by creating a module of CSS for each component or page can sometimes present challenges. Take a look at the code snippet below:

.navbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 1rem;
  background-color: #ffffed;
  border-bottom: 0.25rem solid #eaeaea;
  color: #333;
  font-size: 1.3rem;
}
.navbar h1 {
  font-size: 2rem;
  font-weight: bold;
  text-decoration: none;
}

.navbar ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0.5rem;
  list-style: none;
}

.navbar li {
  margin-left: 1rem;
}

.navbar a {
  text-decoration: none;
}

.navbar a:hover {
  color: aqua;
  text-shadow: 5px 5px 10px #333;
  transition: all 0.3s ease-in;
}

.navbar a:visited {
  color: inherit;
}

.icon {
  width: 2rem;
  height: 2rem;
  margin-left: auto;
}

Here is the associated component code:

'use client';

import Link from 'next/link';
import styles from './navbar.module.css';
import { useThemeSelector } from '@/redux/theme/store';
import { MoonIcon, SunIcon } from '@heroicons/react/16/solid';

export default function Navbar() {
    const isDark = useThemeSelector((state) => state.themeReducer.isDarkMode);
    return (
        <>
            <nav className={styles.navbar}>
                <h1><Link href={'/'}>Home</Link></h1>
                <ul>
                    <li><Link href={'/'}>Create a task</Link></li>
                    {isDark ? <SunIcon className={styles.icon}></SunIcon> : <MoonIcon className={styles.icon}></MoonIcon>}
                </ul>
            </nav>
        </>
    );
}

A couple of issues were encountered within this single component:

  • Despite attempting to apply a hover effect on the anchor tags to change their color, the effect was not taking place as expected.
  • An effort to make the icon scroll to the end of the navbar using flexbox and the margin-left attribute proved unsuccessful, leaving the desired outcome unattainable. Additional style functionalities may also be problematic, though unnoticed by you. To address these issues, two questions arise – How do I resolve the aforementioned problems? And secondly, is there a broader issue at play here?! Is there a need for specific configurations to effectively utilize CSS modules?! This uncertainty leaves me pondering if more challenges lie ahead in future implementations.

Efforts to find resolutions through thorough research have proven futile, as Next.JS documentation does not offer much guidance beyond stating that CSS modules are supported by default, leaving little room for further troubleshooting options.

Answer №1

While I haven't personally delved into CSS modules, it seems to me that your issue lies not in the module system itself, but rather in the intricacies of the CSS language.

You mentioned wanting the color of your a elements to change on hover, yet in your hover selector, you only specified text-shadow without mentioning color. As a result, the text-shadow effect may go unnoticed since it matches the color of all the other text in the navbar, including the a elements. To address this, consider adding color: [desired color];, like so:

.navbar a:hover {
  text-shadow: 5px 5px 10px #333;
  transition: all 0.3s ease-in;
  color: red !important; 

 /*edit: add the !important property 
 to ensure the browser prioritizes 
 it (as discussed in the comments)*/

}

You also expressed interest in positioning the icon at the end of the navbar and attempted to achieve this using flexbox and margin-left properties. However, there seems to be an error in how you are utilizing the margin-left property: for the icon to be at the far right of the browser, it needs to be positioned further from the left side - 1em is too close to the left.

In reality, you might not even require margins. Simply set justify-content to space-between on the navbar. This way, the first item will align with the left side of the browser while the last item (your icon) will align with the right. Remember to specify the flex-direction as row for both the .navbar and .navbar ul selectors.

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #ffffed;
  border-bottom: 0.25rem solid #eaeaea;
  color: #333;
  font-size: 1.3rem;
}

 (...)

.navbar ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  list-style: none;
}

I trust that these adjustments will resolve your concerns :)

If you have any queries, please feel free to reach out.

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 steps can be taken to ensure the Instagram logo remains visible even when it is being hovered over?

Struggling to incorporate a social media icon on my website, I am facing an issue where the Instagram icon outline disappears on hover due to the gradient styling in CSS3. Below is my current code: .social-icons li.instagram a { border-radius: 50%; ...

Experimenting with a React component that is monitoring states

Consider a scenario where I have a basic React functional component that primarily monitors changes in context and displays a view of the state from that context. export default function Observer(props) { // Utilize a separate dispatch context for perfor ...

What is the process for including a checkbox with a label in Card Media?

I attempted to create this feature using code. However, I encountered an issue where the CardMedia and the checkbox would not align properly, resulting in a lack of responsiveness. <Card> <CardMedia ...

Exploring the integration of Formik with Material-UI's select field - A step-by

Trying to implement Formik with Material-UI's Textfield component using the select attribute. Every time I change the option, it shows this warning: Material-UI: You have provided an out-of-range value null for the select (name="subIndicatorId& ...

Store user input in a paragraph

I want to create a unique program that allows users to input text in a field, and when they click "Start", the text will appear in a paragraph backwards. I plan to use Html, jQuery, and CSS for this project. Can anyone provide guidance on how to achieve th ...

An error in the syntax was encountered while trying to install Vite, within the node

After creating a brand new vite project by running npm install vite@latest, selecting React and Javascript + SWC as options, then executing npm install, I encountered an issue while trying to run the command npm run dev. npm does not support Node.js v15.5. ...

My keyframes seem to be malfunctioning, despite exhausting all my troubleshooting options

Could someone please help me figure out why the @keyframes rule is not working for me? I've tried adding -webkit- as a fix, but it doesn't seem to be helping at all. .keyframe { height: 15px; width: 50px; background-color: red; -webkit ...

The effect of iPad screen orientation on CSS styling

Exploring orientation testing using CSS for iPad. Below is the code snippet from the CSS file: @media only screen and (device-width:768px) and(orientation:portrait) { body { background: green; } } @media only screen and (device-width:768px) and(orient ...

Opinion sought: Which is better - creating a CustomWidget or tweaking the CSS? Implementing Surveyjs in conjunction with Next.js and Material UI

Seeking guidance on a current project scenario: Working with a nextjs app using material ui v5 with a custom theme This theme is utilized across multiple apps to maintain consistent look and feel Goal is to create survey forms through the creator tool ...

Add a background image to your webpage using the react-material-ui-carousel component

I am facing an issue while trying to implement a background image within a carousel component. Whenever I reference the image as a component, I encounter a development block due to a character error. My intention is to utilize various background images t ...

What is the best way to prevent a jQuery hover event from adding a text-shadow to the CSS?

Currently, I am facing an issue with a jQuery event that triggers a text-shadow effect: $(".leftColumn").hover(function (){ $(".leftColumn h2").css("text-shadow", "0px 2px 3px rgba(0, 0, 0, 0.5)"); },function(){}); The problem arises when the text-shad ...

duplicate styling for individual table cells

I am in need of a span element inside a td tag that I am generating within a table. In order to ensure the span fills the td, I have set it as an inline-block with a width and height of 100%. However, when pressing the delete key in the last cell, it star ...

Using the ternary operator in various CSS rules

Inside a .hover() function, I've written the code below: $(this).css('background-position', circle.includesXY(e.pageX, e.pageY) ? 'bottom' : ''); I'm wondering how to include additional property:value pairs within ...

What is the best way to animate my logo using JavaScript so that it scales smoothly just like an image logo

I dedicated a significant amount of time to create a unique and eye-catching logo animation for my website! The logo animation I designed perfectly matches the size of the logo image and can be seamlessly integrated into the site. The issue arises when th ...

Adjust the height in proportion to the width

My goal is to adjust the height of the li's based on their width using JQuery. var width = $('li').width(); $('li').css('height', width + 'px'); However, I've encountered an issue as it doesn't resu ...

Ensure that the div is styled with a white background and positioned next to another div with a right margin

I have a white-colored div that needs to be positioned next to another element on a webpage. Additionally, I need a paragraph placed on top of this div for information purposes. Please refer to the following link to see what I am trying to achieve: https:/ ...

Error: The hook call is invalid and can only be made within the body of a function component in ReactJS

Hello everyone, I am currently facing an issue with saving the lat and lng variables in the state within a hook. When trying to do so, I encounter the following error message: "Error: Invalid hook call. Hooks can only be called inside the body of a functio ...

css how to style a table row with a specific identifier

Although this question has been asked millions of times on the internet, my English skills are not great and I struggle to find the right words to search. I have a table with a specific ID set up like this: <table class="tableClass"> <tr id="one ...

Hover over me to see the CSS animation translate upwards until it reaches a specific point

I am new to CSS animation and I am trying to create a circle that moves from one end to the other on hover. However, I am facing an issue where the circle goes off-screen when the browser size is changed. How can I make it stop at a certain point within th ...

The regex routes are now unable to efficiently serve static assets

Question Is it possible to use regex or the built-in URL processor in Express to properly load static files? Expected Behavior Express should match the initial route it encounters and load files as usual. Actual Behavior Error messages indicate that ...