CSS-in-JS was born to abstract away many complicated CSS concepts like cascading, specificity, naming selectors, enforcing naming conventions, enforcing file structures, preprocessors.
There are many CSS-in-JS techniques out there with different quality, you can try any of them for fun but definitely should only use popular ones for production. Following libraries are well developed and maintained by community:
By far this library is the best and most loved solution with more than 25k stars on GitHub. I’ve been using it for 2 years and the experience is more than satisfied. The ecosystem of styled-components is getting bigger, you simply just can’t stop using it.
The second best solution with 9k stars. This one focuses on performance and flexibility; It allows you to style apps quickly with string or object styles.
A set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.
A framework-agnostic CSS-in-JS library with support for server-side rendering, browser prefixing, and minimum CSS generation.
A small, fast, efficient, framework independent CSS-in-JS library. It lets you write inline CSS in your components using the same Object CSS syntax React supports for the style prop.