React-router-dom including css styles?

Question

css

Greetings Toaster members!
In general, I'm doing something like a statistics service, everything is simple - selecting values ​​​​from the database and presenting them in a readable form. At the beginning, I had rendering purely on the backend ( https://bottlepy.org), and on the frontend, the maximum that was connected was jQuery.
Now I decided to rewrite and make a completely isomorphic application on react, using react-router-dom, for the sake of experiment.
To the point of the issue. We have an application of three pages:

<Switch>
      <Route exact path='/' component={Home}/>
      <Route path='/aboutus' component={AboutUs}/>
      <Route path='/contacts' component={Contacts}/>
    </Switch>

How to include styles for each page? It immediately comes to mind in the component itself to render the "link" tag with the path to the css file, respectively:

<link rel="stylesheet" type="text/css" href="/css/home.css" />
    <link rel="stylesheet" type="text/css" href="/css/aboutus.css" />
    <link rel="stylesheet" type="text/css" href="/css/contacts.css" />

is it possible to use the link tag in the body or is it just for the header?

Answer 1

you can put each ccs next to required component and import or like this

.red {
  font-size: 25px;
  background-color: red;
  color: white;
}

import React from 'react'
import btn from './styles.css'

export default class CoolButton extends React.Component {
  render() {
    return (
      <button className={btn.red}>{this.props.text}</button>
    )
  }
}

Answer 2

And, that is, to describe styles in the jsx context, as a react component? Roman Alexandrovich, could you give a clear example of a style component and its use in client code?

Answer 3

Isn't it better to just use styled ?
You will keep modularity, and I won’t be able to intersect classes (after edits at 3 am)