我想获取.myclass
类中的CSS值:
<style>
.myclass {
/* padding-right: 1.5em; */
border: 0;
background-image: linear-gradient(#034076, #034076), linear-gradient(#D2D2D2, #D2D2D2) !important;
background-size: 0 2px, 100% 1px !important;
background-repeat: no-repeat !important;
background-position: center bottom, center calc(100% - 1px) !important;
background-color: transparent !important;
transition: background 0s ease-out !important;
float: none !important;
box-shadow: none !important;
border-radius: 0 !important;
font-weight: 400 !important;
border: none;
}
</style>
<p-autoComplete class="myclass" [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [inputStyleClass]="myclass" [(ngModel)]="country" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)" field="name" [minLength]="1"></p-autoComplete>
答案 0 :(得分:2)
关于编写素数组件的css,但也添加了身体选择器
body .ui-autocomplete .ui-autocomplete-input {
/* padding-right: 1.5em; */
border: 0;
background-image: linear-gradient(#034076, #034076), linear-gradient(#D2D2D2, #D2D2D2) !important;
background-size: 0 2px, 100% 1px !important;
background-repeat: no-repeat !important;
background-position: center bottom, center calc(100% - 1px) !important;
background-color: transparent !important;
transition: background 0s ease-out !important;
float: none !important;
box-shadow: none !important;
border-radius: 0 !important;
font-weight: 400 !important;
border: none;
}
然后在app.component中导入角度核心的ViewEncapsulation
import {Component, OnInit, ViewEncapsulation} from '@angular/core';
和@component
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
encapsulation: ViewEncapsulation.None
})
这是css更改的组件 this is the component with the css changed
答案 1 :(得分:0)
尝试使用此
[的styleClass] =&#34;&#39; MyClass的&#39;&#34;