I am currently building out the admin side of my first React app, which was started with create-react-app (also styled-components if it matters in this case).
Instead of building out my own custom admin I'm using Semantic UI React. Part of this involves importing the styles:
import 'semantic-ui-css/semantic.min.css';
I'm doing this in my admin container component. The problem I'm running in to is that once I import those styles the global selectors are applied site-wide, even though I only want them in the admin side of things.
Is there a standard practice for restricting imported styles to a given area of your app? I'm pretty unfamiliar with this.
You need to use a style loader supporting CSS modules spec.
This loader would namespace your component's css classes with a parent unique class. This would prevent your css classes from leaking to global namespace.
Example, I had used isomorphic style loader from kriasoft which did this.