How to properly themize React components?

Question

JavaScript

Good afternoon.
In my application, I needed to themize some program components.
Moreover, if in some cases, this is just a change in the color of the application - in others, it is also a change in the markup (layout).
I read that colors can be passed through the context (I have never done it yet, if you know good articles on the topic, please share), but what about a different layout?
It is assumed that there will be about 10 different topics, the topic ID will come upon request and, accordingly, depending on the server response, the correct component will need to be shown. I want to understand where to dig:
a) Structurally, how it is possible to place theme files as conveniently as possible
b) How it is correct to throw everything architecturally inside the application.
I assume that all this needs to be implemented simply through some kind of wrapper that will define the theme and, accordingly, return the desired component. But I don’t have much time to write crutches, so I’m looking for advice.
Now the component structure looks something like this:

Company
|- About
|-- AboutSubComponents
|-- about.js
|-- about.css
|- Contacts
|-- contacts.js
|-- contacts.css
|- Products
|-- Products.js
|-- Products.css
| company.js
| company.css

Answer 1

https://medium.com/@_bengarrison/accessing-and-mod...
or just create style files with variable sets.
Browser support
https://caniuse.com/#search=css%20variables

Answer 2

Forget about CSS and take Styled Components