Semantic-ui - 如何防止semantic-ui css文件全局接管页面/ app的其他div /部分

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

我通过CDN加载基本的semantic-ui.min.css，即：

<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：

<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:

我希望semantic-ui css只能有选择地应用于：

div #menu-in-react

div＃menu-in-react

and not to

而不是

div #container-for-non-react-stuff

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.

但是，现在，通过包含semantic-ui-css文件，它也将它的样式应用于div＃container-for-non-react-stuff。

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

如何将semantic-ui.css的应用仅限于特定的div（或从某些div中排除）？

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.

注意：我也尝试使用require（'./ myDist / semantic.css'）使用webpack加载css，但这也最终在semantic-ui中接管了我所有的div。

Thanks!

谢谢！

1 个解决方案

#1

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

如果你使用sass，你可以将整个语义ui框架嵌套在父选择器中，这样它只适用于以下元素：

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

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

有关详细信息，请参阅此处：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.

请注意，您必须将框架css保存为本地sass部分，如_semantic-ui.scss才能使其正常工作，因为sass导入不会解析外部托管资源。

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.

我不建议导入整个框架，至少不清理它的一些;框架css包含一些dom元素样式（即.html，body等），当嵌套在父选择器中时它们将毫无用处。

#1