React router: how to apply different style files to different pages?

Question

React

Good afternoon, dear ones.
Faced the following problem. I need to abandon bootstrap.css on some pages of the project (the library is connected via npm).
How can I do it?
I tried to remove the line from app.js (project root)

import Bootstrap from 'bootstrap/dist/css/bootstrap.css';

into individual components where needed. But where it is not needed, it was still used.

Answer 1

But where it is not needed, it was still used.

It is used because you have moved the styles into separate components, but at the same time they are loaded in you, for sure, in the style tag, or in one single file and this is connected all "above", therefore, although the styles are connected where necessary - they is for the entire site, so they will be applied.
To opt out on some pages, you must not use the same class names as bootstrap on those pages. I can't suggest a "more interesting" solution.