[英]how to style ngx-bootstrap components in angular?
I want to change nav-link style我想更改导航链接样式
This is my try in my.component.scss这是我在 my.component.scss 中的尝试
tabset {
a {
.nav-link {
background: #FFFFFF;
border: 1px solid #DDE6FB;
border-radius: 4px;
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 22px;
text-align: center;
color: #000000;
&.active {
}
}
}
}
But it doesn't work...但它不起作用...
Template in my.component.html my.component.html 中的模板
<tabset>
<tab>
<ng-template tabHeading>
Tab 3
<span
class="badge">12</span>
</ng-template>
tab content
</tab>
</tabset>
How I can do it?我该怎么做?
You need to wrap your CSS with an pseudo class called ::ng-deep
provided by angular.您需要使用 angular 提供的名为
::ng-deep
的伪类来包装您的 CSS。 This will turn off view-encapsulation and your styles will become global.这将关闭视图封装,您的样式将变为全局。 However this will change the styles of all the instances of the components that use that ngx-tabset component, so you need to use the
:host
pseudo class selector.但是,这将改变使用该 ngx-tabset 组件的所有组件实例的样式,因此您需要使用
:host
伪类选择器。
Your code should look like something like this:您的代码应如下所示:
[your-component].component.scss file: [你的组件].component.scss 文件:
:host {
::ng-deep {
tabset {
a {
.nav-link {
background: #ffffff;
border: 1px solid #dde6fb;
border-radius: 4px;
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 22px;
text-align: center;
color: #000000;
&.active {
}
}
}
}
}
}
and your html:和你的html:
<tabset>
<tab>
<ng-template tabHeading>
Tab 3
<span
class="badge">12</span>
</ng-template>
tab content
</tab>
</tabset>
You can read up more on this: https://angular.io/guide/component-styles您可以阅读更多内容: https ://angular.io/guide/component-styles
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.