CSSStyleDeclaration not giving any value while using useRef in react

Question

I want to get the line-height of the element in Rect after render and for this I'm using useRef

const titleLineHeight = titletext.current?.style.lineHeight;

and I didn't get any value in CSSStyleDeclaration

Im not sure how to get the values. Please help me

Thanks in advance :)

Does this answer your question? [How to Access styles from React?](https://stackoverflow.com/questions/35170581/how-to-access-styles-from-react) — Eldar B., Nov 02 '21 at 07:41

score 1 · Accepted Answer · answered Nov 02 '21 at 07:58

use getComputedStyle()

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle


const paraRef = useRef(null);

  useEffect(() => {
    const paraStyle = paraRef.current && getComputedStyle(paraRef.current);
    console.log(paraStyle.lineHeight);
  }, []);

  return (
    <div className="App">
      <p ref={paraRef}>New text</p>
    </div>
  );

CSSStyleDeclaration not giving any value while using useRef in react

1 Answers1