0

我正在通过 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。

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

注意：我也尝试使用 webpack 使用 require('./myDist/semantic.css') 来加载 css，但这也最终导致语义 UI 接管了我所有的 div。

谢谢！

4

1 回答 1

3

如果您使用 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等），当嵌套在父选择器中时，这些样式将毫无用处。

于 2017-01-31T03:11:30.947 回答