Next js set specific backgourd color

I want to set a color as background color in next js, the problem is that i need to get the hex form firebase, so I cannot set it by default from the .css file, I need to use a hook but I cannot find a way to do this :

import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const pid = router.query.id;

  return (
    <div
      style={{
        backgroundColor: `#000`,
      }}
    >
      <h1>d</h1>
    </div>
  );
};

export default Post;

Please note that I will add hooks later, for now I only want a way to change the FULL background color in the js. My code only does the black background for the div elements