CODEWITHSUNDEEP
javascriptcssreactjsmoduleselector
Douglas
Douglas

Reputation: 3

React CSS module not working on certain selectors

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.

Upvotes: 0

Views: 3753

Answers (2)

Douglas
Douglas

Reputation: 3

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.

Upvotes: 0

cheesyMan
cheesyMan

Reputation: 1510

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

item.className will not refer to CSS module.

Upvotes: 1

Related Questions