语义-ui-如何防止语义-ui css文件全局接管其他div/部件的页面/应用程序

Question

我正在通过CDN加载基本语义-ui.min.css，即：

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

但是，我的页面还有其他div：

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

我希望语义-ui css能够有选择地应用于：

div #menu-in-react

而非

div #container-for-non-react-stuff

然而，现在，通过包含语义-ui-css文件，它也将其样式应用于div #container-for-non-react-stuff。

如何将语义-ui.css的应用限制在特定的div(或从某些div中排除)？

注意:我也尝试使用require(‘./myDist/emantic.css’)使用webpack加载css，但这也最终导致语义-ui接管了我所有的div。

谢谢!

Answer 1

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

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

有关更多信息，请参见这里：https://codepen.io/trey/post/nesting-sass-includes

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

我不建议在导入整个框架之前至少清除其中的一些；框架css包括一些dom元素样式(即。html，body等)，当嵌套在父选择器中时，这是非常无用的。