Я использую компонент accordion из ng-bootstrap в одном из своих приложений и селектор /deep/ (он же: ::ng-deep и >>>) для установки его стилей. Однако я увидел, что этот селектор устарел.
Есть ли альтернатива для установки стилей компонентов ng-bootstrap?
Поддержка эмулируемого /deep/ CSS-селектора (наследственный комбинатор Shadow-Piercing, также известный как >>>) устарела, чтобы соответствовать реализациям браузера и намерению Chrome удалить его. ::ng-deep был добавлен, чтобы предоставить временный обходной путь для разработчиков, которые в настоящее время используют эту функцию.
Отсюда: http://angularjs.blogspot.com/2017/07/angular-43-now-available.html
Я немного покопался, и можно перезаписать стили ng-bootstrap, если отключить просмотреть инкапсуляцию для компонента, например:
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ExampleComponent {
constructor(public activeModal: NgbActiveModal) { }
}
Например, здесь я настраиваю стили для модального диалогового окна, потому что я предположил, что мой пример компонента должен отображаться как модальное диалоговое окно, и я хочу, чтобы его ширина составляла не более 70% окна просмотра на маленьких экранах:
.modal-dialog {
@include media-breakpoint-down(xs) {
max-width: 70vw;
margin: 10px auto;
}
}
Обратите внимание, что отключение инкапсуляции представления означает, что стили для этого конкретного компонента будут доступны во всем приложении, поэтому другие компоненты будут иметь к ним доступ и в конечном итоге будут использовать их, если вы не будете осторожны.
Вы должны создать собственный стиль, чтобы переопределить переменную начальной загрузки по умолчанию в scss.
Вы можете найти все возможные variables здесь ../node_modules/bootstrap/scss/_variables.scss
Bootstrap также предоставляет нам файл custom для добавления нашего стиля ../node_modules/bootstrap/scss/_custom.scss
например: здесь я переопределяю две переменные, которые влияют на мой аккордеон (я изменил некоторые случайные цвета)
$link-color:$brand-warning;
$card-bg:$green;
и не забудьте удалить !default в _custom.scss, и вы закончили с пользовательским стилем.
Теперь нужно построить css из scss
Сначала установите npm install -g grunt-cli глобально
затем перейдите к \my-app\node_modules\bootstrap> npm install, это установит все зависимости.
Наконец, запустите \my-app\node_modules\bootstrap> grunt, это создаст файл css.
Надеюсь, это сработает.
В моем случае «bootstrap.min.css» не был сгенерирован правильно, поэтому теперь я использую «../node_modules/bootstrap/dist/css/bootstrap.css» в моем файле .angular-cli.json.
