I have a requirement to be able to determine the background colour of a component, that's applied via CSS. The CSS files can change at any time, so simply assigning the colour in code isn't an option as it won't necessarily be the same for every one of our clients, nor will it remain the same between releases.

For HTML type elements, I can use a ref to return the element, and call getComputedStyles(element), and access the value from the returned object.

However, when using React Bootstrap elements, passing a ref to an element returns an UncontrolledComponent type, which doesn't provide me with the element. Whilst I could use the styles object returned in props, because the colours are applied with CSS, this is always empty.

I am able to access the element using ReactDOM.findDOMNode, but this is deprecated in strict mode, and is actively warned against in functional components.

Is there a way to access the DOM element of a rendered UncontrolledComponent ref, as I would for an HTML type element, but without using findDOMNode?

Working code example below (React/Typescript):

// Component Did Mount phase
  useEffect(() => {
    if (headerRef?.current !== null) {
      const element = ReactDOM.findDOMNode(headerRef.current);

      // "as" is ok here, as it's an element
      const theme = getComputedStyle(element as Element);
      dispatch(setBackgroundColour(theme.backgroundColor));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

And the usage of the ref:

const headerRef = useRef<Navbar>(null);

<Navbar
    className="header"
    inverse
    collapseOnSelect
    data-testid="header-nav-bar"
    ref={headerRef}
>
{truncated for clarity}
</Navbar>