0

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.

Jody Heavener
  • 2,704
  • 5
  • 41
  • 70

1 Answers1

0

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.

Shishir Arora
  • 5,521
  • 4
  • 30
  • 35