我的代码中有第三方库的angular-5下拉组件,这个组件有自己的CSS,由于其默认行为,我无法更改其CSS(这里我试图减少下拉列表的宽度) ,我尝试使用写另一个css类和内联样式,但它不会改变宽度。
HTML代码,我控制了我的代码:(第三方下拉组件)
<test-dropdown id="dropdown" label="Options Array"
[selectedOption]="dropdownOptions[0]">
<test-option *ngFor="let option of dropdownOptions"
[option]="option" [disabled]="option.disabled">{{option.label}}
</test-option>
</test-dropdown>
以上下拉组件,在浏览器中运行应用程序后,
<test-dropdown _ngcontent-c4="" id="dropdown" label="default" ng-reflect-label="default">
<div class="test-dropdown" ng-reflect-ng-class="[object Object]">
<label>DropDown</label>
<div>
<button class="select">Select...</button>
<div class="dropdown">
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
<test-option _ngcontent-c4="" class="dropdown-btn-vp option ng-star-inserted" style="min-width: 120px"
ng-reflect-option="[object Object]">
<button class="option">
Option One
</button>
</test-option>
<test-option _ngcontent-c4="" class="dropdown-btn-vp option ng-star-inserted" style="min-width: 120px"
ng-reflect-option="[object Object]">
<button class="option">
Option Two
</button>
</test-option>
<!--bindings={}-->
</div>
</div>
</div>
</test-dropdown>
简而言之,我想在课堂上应用css样式, test-dropdown-&gt; button.select 和 test-dropdown-&gt; div.dropdown
答案 0 :(得分:2)
此问题依赖于 CSS specificity :CSS规则有一个订单,如果您希望应用您的样式,那么您应该使用正确的CSS规则。
您还必须将其与Angular's view encapsulation结合使用,以确保您的样式确实已应用。
为此,有几个解决方案:
ngStyle
指令,或仅使用一个属性[style.property]="'value'"
在您的情况下,您应该将样式添加到全局CSS文件style.css
(或其具有的任何扩展名)。您的选择器将是:
test-dropdown#dropdown div.test-dropdown div button.select {}
答案 1 :(得分:2)
我使用::ng-deep pseudo-class selector
,将此文档https://blog.angular-university.io/angular-host-context称为角度视图封装。
下面的代码片段让我使用ng-deep覆盖css属性。
例如在我的情况下<test-dropdown>
是一个角度组件,它采用它的默认css类.dropdown
,现在我想修改min-width
属性,所以我使用ng-deep伪类选择器,对于其他角度分量也是如此。
test-dropdown::ng-deep .dropdown {
min-width: 20%;
}
test-button::ng-deep .test-button {
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
text-align: center;
cursor: pointer;
min-width: 20%;
}
test-date-picker::ng-deep .date {
min-width: 100%;
line-height: 1.42857143;
}
test-date-picker::ng-deep .date-picker {
min-width: 100%;
line-height: 1.42857143;
}
答案 2 :(得分:0)
默认表单值很可能来自您网站的CSS,并且不太可能从第三方库中获取样式。
你能展示网站和CSS类代码吗?在Chrome的开发者模式中跟踪问题会更容易,看看它从哪里获得风格。