React CSS module not working on certain selectors

Question

I'm learning the React as beginner. I'm working with CSS modules.

Menu.module.css is not 100% working, it's not applying styles for .menu a.last selector and I don't realize why (it's perfectly working for .menu a). The problem persist by using CSS modules, but it works as intended with plain CSS.

Menu.jsx

import styles from './Menu.module.css'

export default function Menu({ className, items = [], children }) {
    return (
    <div className={`menu ${styles.menu} ${className || ''}`}>
      {children ? <h2>{children}</h2> : ''}
      <ul>
        {items.map((item, i) => (
          <li key={i}>
            <a
              href={item.href}
              className={item.className || ''}
            >
              {item.name}
            </a>
          </li>
        ))}
      </ul>
    </div>
  )
}

Menu.module.css

.menu a {
  color: black;
  text-decoration: none;
}

.menu a.last {
  background: red !important;
}

Image of the code and HTML: https://ibb.co/r5m6W7s

I can get the a.last element through the console using the same querySelector as the CSS file is using so this leads me to think that there is a logical problem or CSS Modules selectors works differently than CSS this time.

I suppose it's a very easy to solve problem but can't get it. Thank you for your help.

Switched back to plain CSS to check if it would work and yes, it did work.

Tried to do it again from scratch with CSS Modules but it resulted in the same problem.

Tried changing class names even using plain class (not randomly generated by the CSS Modules compiler) and used this plain class name to check and it didn't work while still working with the .module.css file.

cheesyMan · Accepted Answer · 2022-04-03 00:01:08Z

1

I'd say you should use className={styles[item.className] || ''}.

item.className will not refer to CSS module.

answered Apr 3, 2022 at 0:01

cheesyMan

1,5301 gold badge6 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Douglas Over a year ago

Hi, the CSS module class name is correctly applied you can check it on the image, forget about className argument, the CSS is not pointed to that selector but to the styles.menu selector which is defined in the CSS file and is also called in the div className property, thx

cheesyMan Over a year ago

When you use CSS modules, all class names inside it will be given new names, to be sure they're scoped to that component only. Your <a> tag will receive the .last class you pass through the items prop, but as you're using CSS modules, there will NOT BE anymore a .menu a.last {} CSS rule, as the module will transform it into .menu_something_Random a.last_somethingElse_Random. So, if you don't have a normal, plain CSS rule for that, your tag will not be styled. The alternative I suggested in the answer is to pass also .last as a CSS module class.

Douglas Over a year ago

OMG I got it. Didn't consider ALL class names changed while using CSS modules so I was just using .menu class correctly but wasn't using the .last class with the CSS modules proper selector/property, thank you so much.

Douglas · Accepted Answer · 2022-04-06 05:55:42Z

0

Solved by cheesyMan: I didn't consider ALL class names in the CSS file changed their names after using CSS modules. I was just using .menu CSS module selector but not the .last CSS module selector/property. The code was running like .menu_random123 a.last (wrong) while in order to work it needed .menu_random123 a.last_random123. It was so hard to notice because the .last class was being passed by the parent element.

answered Apr 6, 2022 at 5:55

Douglas

31 silver badge2 bronze badges

Collectives™ on Stack Overflow

React CSS module not working on certain selectors

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related