語義的UI - 如何防止語義UI CSS文件從全局接管頁/應用

Question

我通過CDN加載基本語義ui.min.css其他的div /部分，即：

<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

而不是

格#container-for-non-react-stuff

然而，現在，通過包括語義-UI-css文件，它是運用它的風格到div #container-for-non-react-stuff。

如何限制semantic-ui.css僅適用於特定的div（或排除某些div）？

注意：我也嘗試使用require（'./ myDist/semantic.css'）使用webpack加載css，但這也最終以語義ui接管了我所有的div。

謝謝！

Answer 1

如果您使用的青菜，你可以窩家長選擇整個內部語義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等），當嵌套在父級選擇器中時，這將是無用的。