How do I grab the height of an element in a different .scss module and React component?
I have a component that I'm setting to scroll the overflow of but I need to subtract the height of my header from the height of the entire page. My header is in two parts. A static portion that displays across the entire app, and a dynamic portion that changes based on the path. The height of the static portion is defined, but the dynamic portion is dependent on font-size. I've attempted to grab the value in a React useEffect and store it in a CSS variable, but the CSS variable isn't reading. How can I either properly import that value to a CSS variable or store the value I need in CSS only?
3 Replies
Just as a clarification because I wrote CSS in the content of my post, I am using Sass.
The second screenshot where you're using the useEffect, what component is that a part of?
The useEffect is in my App.tsx. And I pass that down one level using a style prop where I give that to a div using it's style attribute. The provided code is an immediate child of my App.tsx.
