0

I am loading basic semantic-ui.min.css through CDN, ie:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link>

However, my page has other divs like this:

<div id="wrapper">
  <div id="menu-in-react"></div>
  <div id="container-for-non-react-stuff"></div>
</div>

I would like semantic-ui css to be applied selectively to only:

div #menu-in-react

and not to

div #container-for-non-react-stuff

However, right now, by including the semantic-ui-css file, it is applying its style to div #container-for-non-react-stuff too.

How do I limit the application of semantic-ui.css to only specific divs (or exclude from certain divs)?

Note: I also tried using require('./myDist/semantic.css') using webpack to load the css, but this also ended up in semantic-ui taking over all my divs.

Thanks!

dev
  • 431
  • 1
  • 6
  • 13

1 Answers1

3

If you use sass, you can nest the entire semantic ui framework inside a parent selector so that it only applies to elements within:

#menu-in-react {
  @import 'semantic-ui';
}

See here for more info: https://codepen.io/trey/post/nesting-sass-includes

Do note that you'll have to save the framework css as a local sass partial like _semantic-ui.scss in order for this to work, as sass imports will not parse externally hosted resources.

I wouldn't recommend importing the entire framework without cleaning up some of it at least; the framework css includes some dom element styles (ie. html, body, etc) which would be quite useless when nested in a parent selector.

dommmm
  • 899
  • 8
  • 16