Семантический-UI - как предотвратить семантический-UI файл CSS от глобально принимать по сравнению с другими дивы/части страницы/приложения

Question

Я загрузки основной семантический-ui.min.css через CDN, то есть:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link> 

Однако моя страница имеет другие дивы, как это:

<div id="wrapper"> 
    <div id="menu-in-react"></div> 
    <div id="container-for-non-react-stuff"></div> 
</div> 

Я хотел бы знаково-щ CSS, которые будут применяться выборочно только:

div #menu-in-react

и не

ДИВ #container-for-non-react-stuff

Однако, прямо сейчас, в том числе файл семантико-щ-Css, он применяет свой стиль до div #container-for-non-react-stuff тоже.

Как ограничить применение semantic-ui.css только конкретным divs (или исключить из определенных div)?

Примечание: Я также попытался использовать require ('./ myDist/semantic.css), используя webpack для загрузки css, но это также закончилось тем, что semantic-ui захватил все мои div.

Спасибо!

Answer 1

Если вы используете дерзость, вы можете гнездятся вся смысловая структура пользовательского интерфейса внутри родительского селектора, так что это относится только к элементам в пределах:

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

для получения дополнительной информации см здесь: https://codepen.io/trey/post/nesting-sass-includes

Do обратите внимание, что вам нужно будет сохранить фреймворк css как локальный sass partial, такой как _semantic-ui.scss, чтобы это работало, поскольку импорт sass не будет анализировать ресурсы, размещенные на внешнем сервере.

Я бы не рекомендовал импортировать всю фреймворк, не читая хотя бы некоторые из них; фреймворк css включает в себя некоторые стили элементов dom (то есть html, body и т. д.), что было бы совершенно бесполезно при вложении в родительский селектор.