Question

我想获取.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>

Answer 1

关于编写素数组件的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
})

this is the initial component

这是css更改的组件 this is the component with the css changed

Answer 2

尝试使用此

[的styleClass] =＆＃34;＆＃39; MyClass的＆＃39;＆＃34;

如何改变NgPrime组件的样式？

2 个答案: