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

Question

我正在通过 CDN 加载基本的 semantic-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，但这也最终导致语义 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 等)，当嵌套在父选择器中时，这些样式将毫无用处。