withStyle-client.jsx

// read this: https://github.com/reactwg/react-18/discussions/110
import React, { useMemo, useInsertionEffect, forwardRef } from 'react'

const insertedRules =
  typeof window !== 'undefined' && window.__SSR_STYLES__
    ? window.__SSR_STYLES__
    : {}

function getStyleForRule (url, content) {
  if (content) {
    const style = document.createElement('style')
    style.setAttribute('data-href', url)
    style.appendChild(document.createTextNode(content))
    return style
  }
  const link = document.createElement('link')
  link.href = url
  return link
}

function exists (url) {
  if (insertedRules[url]) {
    return true
  }
  return false
}

export function useStyles (styles) {
 
  useInsertionEffect(() => {
 
    s.forEach(({ url, content }) => {
      if (!exists(url, content)) {
        insertedRules[url] = true
        document.head.appendChild(getStyleForRule(url, content))
      }
    })
  }, [...styles])
}
function Styles ({ styles }) {
  useStyles(styles)
  return null
}

export default (Component, styles) => {
  return forwardRef(function (props, ref) {
    return (
      <>
        <Styles styles={styles} />
        <Component {...props} ref={ref} />
      </>
    )
  })
}