React 的元素节点在使用 css 模块声明时没有 css 属性

Question

当我使用 CSS 模块为反应元素设置样式时，我无法获取节点的样式。该节点中的所有样式都是空字符串。在这种情况下如何访问节点的样式。

<div className={collapseTitle} onClick={collapseCard}>Caard</div>

const collapseCard =(e) => {
        console.log(e.target.style.maxHeight)
}

CSS 文件

.collapseTitle {
   max-height: 10px
}

Answer 1

下面是工作代码。

import React,{useRef} from "react";
    import "./styles.css";
    
    
    export default function App() {
       const divRef =useRef<HTMLDivElement>(null);
       const collapseCard =(e:any) => {
        console.log(e.target.style.maxHeight)
        const styles = getComputedStyle(divRef.current!)
        console.log(styles);
        console.log(styles.textAlign);
      }
      return (
        <div className="App" ref={divRef} onClick={collapseCard}>
          <h1>Hello CodeSandbox</h1>
          <h2>Start editing to see some magic happen!</h2>
        </div>
      );
    }

解决方案 2：- 在循环中使用 Ref

const arrLength = arr.length;
  const [elRefs, setElRefs] = React.useState([]);
 const collapseCard =(e:any,divRef:any) => {
    console.log(e.target.style.maxHeight)
    const styles = getComputedStyle(divRef.current!)
    console.log(styles);
    console.log(styles.textAlign);
  }
  React.useEffect(() => {
    // add or remove refs
    setElRefs(elRefs => (
      Array(arrLength).fill().map((_, i) => elRefs[i] || createRef())
    ));
  }, [arrLength]);

  return (
    <div>
      {arr.map((el, i) => (
        <div className="App" ref={elRefs[i]} onClick={()=>collapseCard(elRefs[i])}>...</div>
      ))}
    </div>
  );

React 的元素节点在使用 css 模块声明时没有 css 属性

React's element node doesn't have css properties when declared with css modules

javascript

css

dom

dom-events

reactjs