Стиль ng-bootstrap аккордеон с css

У меня есть компонент Angular 2 с аккордеон, который я добавил с помощью ng-bootstrap. Все работает отлично функционально, однако стили, которые я пытаюсь загрузить, используя классы .card, .card-header, .card-block, которые скомпилированные элементы аккордеона имеют, эти стили вообще не применяются к элементам.Стиль ng-bootstrap аккордеон с css

Эти классы устанавливаются при помощи ng-bootstrap непосредственно при преобразовании аккордеона в div.

Я применяю свой собственный css через файл styles.scss, который я связываю с компонентами файла TypeScript. Когда все отображается, мои стили отображаются в тегах <style></style> в заголовке вывода html. Похоже на это.

<style> 
     [_nghost-xfh-23] .card[_ngcontent-xfh-23] { 
      border: none; } 

    [_nghost-xfh-23] .card-header[_ngcontent-xfh-23] { 
     margin-top: 0.75em !important; 
     border: 1px solid rgba(0, 0, 0, 0.125); } 

    [_nghost-xfh-23] .card-block[_ngcontent-xfh-23] { 
     text-align: left; } 
    </style>

styles.scss выглядит следующим образом:

:host .card { 
    border: none; 
} 

:host .card-header { 
    margin-top: 0.75em !important; 
    border: 1px solid rgba(0, 0, 0, 0.125); 
} 

:host .card-block { 
    text-align: left; 

}

Я думаю, что Угловые 2 пытаются применить стили (во время компиляции), но создает Div с указанными классами потом, что делает невозможно применить стили к элементам.

Im сдержан, чтобы непосредственно отредактировать файл bootstrap.css или создать другой глобальный файл css. Я надеюсь, что есть способ повторно использовать стили css после загрузки компонента или какие-то другие средства для стиля аккордеонов ng-bootstrap.

Надежда моя проблема имеет смысл, рассматривает Sy

источник

2017-01-16 svvage

Что такое css этого класса? Как вы добавляете эти классы? Как вы реализуете стили? Нам нужно немного больше информации, чтобы помочь вам. – DomeTune

@DomeTune сделал это немного подробнее, надеюсь, что это поможет. – svvage

Похоже, вы столкнулись с теневым DOM. https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM Если вы добавите ': deep:' или '>>>' в свои правила css –

Как сказал @ChristopherMoore в своем комментарии, это была проблема из-за Shadow DOM. Добавлен /deep/. Здесь обновлен функциональный код.

/deep/ .card { 
    border: none; 
} 

/deep/ .card-header { 
    margin-top: 0.75em !important; 
    border: 1px solid rgba(0, 0, 0, 0.125); 
} 

/deep/ .card-block { 
    text-align: left

источник

2017-01-16 18:21:32 svvage

ответ

Смежные вопросы