Tengo un requisito para poder determinar el color de fondo de un componente, que se aplica a través de CSS. Los archivos CSS pueden cambiar en cualquier momento, por lo que simplemente asignar el color en el código no es una opción, ya que no será necesariamente el mismo para cada uno de nuestros clientes, ni permanecerá igual entre versiones.

Para elementos de tipo HTML, puedo usar una ref para devolver el elemento y llamar a getComputedStyles(element) y acceder al valor del objeto devuelto.

Sin embargo, al usar elementos de React Bootstrap, pasar una referencia a un elemento devuelve un tipo de UncontrolledComponent no controlado, que no me proporciona el elemento. Si bien podría usar el objeto de styles devuelto en props , porque los colores se aplican con CSS, esto siempre está vacío.

Puedo acceder al elemento usando ReactDOM.findDOMNode , pero está obsoleto en modo estricto y se advierte activamente en los componentes funcionales.

¿Hay alguna manera de acceder al elemento DOM de un componente UncontrolledComponent ref renderizado, como lo haría con un elemento de tipo HTML, pero sin usar findDOMNode ?

Ejemplo de código de trabajo a continuación (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 }, []);

Y el uso de la referencia:

 const headerRef = useRef<Navbar>(null); <Navbar className="header" inverse collapseOnSelect data-testid="header-nav-bar" ref={headerRef} > {truncated for clarity} </Navbar>