How can I use style tag in JSX

Question

So I'm in a situation where I have to use <style> tag, That is because I have multiple pages (I'm using react router DOM) so I cant apply the same style to every page as that would mess things up. Is there a way I can use <style> tag in JSX?

I have to use style tag like this:

function RandomScreen(){
    return (
        <div>
          <style></style>
        </div>
    )
}

Answer 1

You can simply import a stylesheet into your page:

import './main.css'

Another solution is to use Emotion and the Global component: https://emotion.sh/docs/globals

Answer 2

Can you use separate css file for every component and import every css file in every component you need.

import './RandomScreen.css';