UseRef не работает с body внутри Helmet

Question

import React from 'react'
import { HelmetProvider, Helmet } from 'react-helmet-async'

import tw from "tailwind-styled-components"
import { backgroundColorIsLight } from '../utils'
import { ThemeContext } from '../theme/ThemeProvider'

const BodyStyles = (props) =>
{
    const colorTag = tw`
    ${(props) => {
        switch (props.$color) {
        case 'primary': return "bg-primary"
        case 'primary-variant' : return "bg-primary-variant"
        case 'secondary': return "bg-secondary"
        case 'secondary-variant' : return "bg-secondary-variant"
        default: return "bg-bg"
        }
    }} 
    `
    const themeTag = tw`
    ${ (props) => props.$theme }
    `
    
    const { theme, backgroundTag, 
            setIsLightBackground } = React.useContext(ThemeContext)

    const customStylesRef = React.useRef()

    React.useEffect(() => {
        
        console.log (customStylesRef)
        if (customStylesRef.current)
        {
          console.log (theme)
          console.log (backgroundTag)
          const isLight = backgroundColorIsLight(customStylesRef.current) 
          setIsLightBackground(isLight)
        }
      }, [theme, backgroundTag])

    return <HelmetProvider>
      <Helmet>
        <body ref={customStylesRef} className={` ${themeTag} ${colorTag}`}  />
      </Helmet>
    </HelmetProvider>
      
}

export default BodyStyles

В консоль, при схватывании изменений выводиться { curent.undefined }

БЛОГ НА HUSL

UseRef не работает с body внутри Helmet

Ответы (0 шт):