React CSS 模块不适用于某些选择器

Question

我正在学习 React 作为初学者。我正在使用 CSS 个模块。

Menu.module.css 不是 100% 工作，它没有为 .menu a.last 选择器应用样式，我不明白为什么（它工作得很好对于 .menu a）。使用 CSS 模块时问题仍然存在，但它可以按预期使用普通 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;
}

代码图片和HTML：https://ibb.co/r5m6W7s

我可以使用与 CSS 文件使用的相同的 querySelector 通过控制台获取 a.last 元素，所以这让我认为那里是一个逻辑问题，或者 CSS 模块选择器这次的工作方式与 CSS 不同。

我想这是一个很容易解决但无法解决的问题。感谢您的帮助。

切换回普通 CSS 以检查它是否有效，是的，它确实有效。

尝试用 CSS 个模块从头开始重新做，但结果是同样的问题。

尝试更改 class 名称，甚至使用纯 class（不是由 CSS 模块编译器随机生成）并使用此纯 class 名称进行检查，但没有成功仍在使用 .module.css 文件时无法工作。

Answer 1

我会说你应该使用 className={styles[item.className] || ''}。

item.className 不会引用 CSS 模块。

Answer 2

由 cheesyMan 解决：我没有考虑 CSS 文件中的所有 class 名称在使用 CSS 模块后更改了它们的名称。我只是使用 .menu CSS 模块选择器而不是 .last CSS 模块 selector/property。代码运行类似于 .menu_random123 a.last（错误），而为了工作它需要 .menu_random123 a.last_random123。很难注意到，因为父元素正在传递 .last class。

React CSS 模块不适用于某些选择器

React CSS module not working on certain selectors

javascript

css

module

selector

reactjs