Semantic-ui - 如何防止semantic-ui css文件全局接管页面/ app的其他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>

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

  

div #menu-in-react

而不是

  

div #container-for-non-react-stuff

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

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

注意：我也尝试使用require（'。/ myDist / semantic.css'）使用webpack加载css，但这也最终在semantic-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等），当嵌套在父选择器中时它们将毫无用处。