How to apply styles with DOM in ReactJS and server-side framework?

I am new at reactjs and i want to manipulate styles directly with DOM or inline-styles. I am using useLayoutEffect to make this run as early as possible.

import { useLayoutEffect } from 'react'


const App = () => {
  useLayoutEffect(() => {
    document.querySelector('.my-element').style.background = 'red'
  }, [])

  return <div className="my-element">Hello World!</div>
}

export default App

And the effect is runs like regular styles. But, am I doing the right thing? Or is there a better method for applying style directly with DOM?

And let’s say I want to use it on server-side or static-side thing, I always has a slight FOUC (unstyled state) before the real styles is applied, like in NextJS for example.

Wanted to learn how to apply styles with DOM, in server-side, in SSG, and what the best way to do it.