accordion
组件,并使用/deep/
选择器(又称: ::ng-deep
和>>>
)来设置其样式。但是我看到这个选择器已经过时了。有没有其他方法来设置ng-bootstrap组件的样式?
accordion
组件,并使用/deep/
选择器(又称: ::ng-deep
和>>>
)来设置其样式。但是我看到这个选择器已经过时了。我已经进行了一些调查,如果您关闭组件的view encapsulation,则可以覆盖ng-bootstrap样式,方法如下:
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ExampleComponent {
constructor(public activeModal: NgbActiveModal) { }
}
.modal-dialog {
@include media-breakpoint-down(xs) {
max-width: 70vw;
margin: 10px auto;
}
}
支持模拟的/deep/ CSS选择器(影子穿透后代组合器,也称为>>>)已被弃用,以匹配浏览器实现和Chrome的意图来删除。 ::ng-deep已添加以提供临时解决方案,供当前使用此功能的开发人员使用。
来源:http://angularjs.blogspot.com/2017/07/angular-43-now-available.html
你需要在scss中进行自定义样式以覆盖默认的bootstrap变量。
你可以在这里找到所有可能的变量
../node_modules/bootstrap/scss/_variables.scss
Bootstrap还提供了一个custom
文件,供我们添加我们的样式../node_modules/bootstrap/scss/_custom.scss
例如:在这里,我正在覆盖两个影响我的手风琴的变量(我更改了一些随机颜色)
$link-color:$brand-warning;
$card-bg:$green;
别忘了在_custom.scss
中删除!default
,这样就完成了自定义样式。
现在需要从scss
构建css
首先全局安装npm install -g grunt-cli
然后导航到\my-app\node_modules\bootstrap> npm install
,这将安装所有依赖项。
最后运行\my-app\node_modules\bootstrap> grunt
,这将创建CSS文件。
希望这样能够正常工作。
在我的情况下,“bootstrap.min.css”没有正确生成,所以我现在在我的.angular-cli.json文件中使用“../node_modules/bootstrap/dist/css/bootstrap.css”。