如何使用 document.querySelector select 我的 CSS 模块 class？

Question

我希望能够 select styles.scrollValue 使用 document.querySelector()

import { useEffect } from "react";
import styles from "./Navbar.module.scss";

const Navbar = () => {
  const handleScroll = () => {
    document.querySelector(styles.scrollValue).innerHTML = scrollY;
  };
  useEffect(() => {
    document.addEventListener("scroll", handleScroll);
    return () => {
      document.removeEventListener("scroll", handleScroll);
    };
  });
  return (
    <nav className={styles.navbar}>
      <div className={styles.content}>
        <h1 className={styles.scrollValue}>0</h1>
      </div>
    </nav>
  );
};

运行这段代码我得到一个错误：

TypeError: document.querySelector(...) is null

我知道我可以向该元素添加一个全局 class 这样做：

className={`${styles.scrollValue} scrollValue`}

但这会破坏使用 CSS 模块的优势。

有没有办法 select CSS 模块 class 而无需添加另一个模块？

Answer 1

您需要 select 它作为 class,

document.querySelector(`.${styles.scrollValue}`)

调用 styles.property returns 一个值，如下所示，

scrollValue: '_src_styles_module__scrollValue'

因此，当您调用 document.querySelector 时，它正在寻找没有 select 的 _src_styles_module__scrollValue 或键入这样的 . 或 # 这使得它寻找匹配 <_src_styles_module__scrollValue> 的元素（在本例中）。由于没有具有该名称或散列名称的元素，它将 return null.

Working demo

如何使用 document.querySelector select 我的 CSS 模块 class？

How do I select my CSS module class using document.querySelector?

css

reactjs

css-modules