inline-css | Inline css into an html file

I have a single HTML file and some SASS and JS, and for Production I want to bundle these together into a single HTML file which contains the SASS compiled into CSS into an inline

I wanted to change the color of the heading during specific times of the day.(e.g At night blue, in the morning green...) For this I'm trying to use inline-css(inside js file).

My css file:

I'm trying to extract automatically the part of the tag's style from div html. I have 100 style combinations, so doing it manually is not possible. This is the path html style tags --> css

I need to center my div no matter what screen size and it will not center. I have tried the normal margin: 0 auto; and text-align:center and a few other things but it will not center. I believe it's because of the confetti I have on the screen. Any help would be awesome on how to center this.

Here is the CSS code I am using:

I am a newbie developing WordPress theme but having some problems in the navigation menu. I want to open sub-menu through jQuery for certain reasons but terribly failed. Would you guys help me to get out of this problem? I have coded the following in the different php and js pages.

header.php

Is it possible to use the CSS @font-face to provide font files to an RMarkdown?

e.g.:

While I clearly am no webpack expert, I usually figure/find out what I need to modify in order to achieve what I need. However, I lost more than a day on this one, even though it seems fairly simple:

I want to add an index.html to the build, after building, by copy-ing it from a folder.

I tried adding this to configureWebpack, in vue.config.js:

I've been trying to find a way to have a similar effect to the common "stick to the top of a container" but instead of the top, i'm trying to make it stick to the border of a container always in the same place, but i keep getting the text to just keeps moving around when the resolution changes: In Higher resolutions it stays in the right place, but when the resolution diminishes or get way to high, the text starts dancing around the container.
To clarify, i'm using styled-components for the container and inline-css for the text, i've already tried "responsive" css using screen.size to change the marginTop when the screen size changes, but it didn't seem effective or browser-friendly at all and was also really confusing to read, so i hope there's a better way to do this, i'm sorry if this question seems way to stupid and/or was already answered, i've search a lot about it but didn't find anything that fitted the context and worked.

Various libraries offer styling solutions via props of components, while the "standard" way for a long time has been to write CSS, separately.

With the invention of CSS-in-JS, it's now possible to have some benefits we didn't have before (e.g string literals, conditional classes, plugins to extend functionality, etc.), and on the separation level, it can be used like CSS style tags in HTML, where it's possible to define in the "main" file (HTML, in the case of CSS) an environment to write the code in, and we have more flexibility, but with JSS, for example, it's a common practice, from my understanding, to centralize the styling code in a classes object.

On the other hand, we can write not just inline CSS in components, but various libaries offer styling solutions as props of components such as Material-UI.

So, my question is: what advantages pros and cons do you think there are for writing CSS-inJS compared to writing styling code using component props?

*Disclaimer: I don't have a lot of experience with CSS-in-JS and styling in React in general, so I might have a wrong impression of what things are like generally/in the bigger picture.

*Do notice that I'm not asking about inline-CSS in components and that this is not an inline vs non-inline question, but a more specific one.