Semantic-ui

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

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

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

注意：我也试过使用require('./myDist/semantic.css') 使用webpack加载css,但这也以语义结束 - ui 接管了我所有的 div。

谢谢！

Answer 1

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

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

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

我不建议导入整个框架而不清理其中的至少一部分；框架 css 包含一些 dom 元素样式（即 html、body 等），当嵌套在父选择器中时，这些样式将 quite 无用.

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