import React , { ReactNode , useEffect } from 'react' ; interface ICssVariablesManagerProps { variables : { [ key ] : string ; } ; children : ReactNode ; } export const CssVariablesProvider = ( { children , variables , } ) => { const root = React . createRef ( ) ; useEffect ( ( ) => { Object . keys ( variables ) . forEach ( ( key ) => { if ( root . current ) { root . current . style . setProperty ( key , variables [ key ] ) ; } } ) ; } , [ variables ] ) ; return < div ref = { root } > { children } < /div>; } ;