如何通过其选择器-Angular7/8将CSS应用于组件的元素

Question

我正在处理Angular 7/8应用程序。我制作了一个自定义的input组件，其选择器称为<app-input></app-input>。此input具有一些我可能想更改其他地方的特定样式，例如默认情况下，border-color为blue，在其他组件中，我想将其样式更改为red。问题是我无法访问<app-input></app-input>中的input元素。

在父组件中，我将样式应用于：

我正在使用SCSS

//Styles from parent component
app-input{
    & .an-input{
        width: 100%;
        & input{
            border-color: red;
        }
    }
}

输入<app-input></app-input>组件代码

//Template
<div class="an-input">
    <input 
        [type]="type" 
        [id]="id" 
        [name]="name" 
        (focus)="inputFocus($event)" 
        (blur)="inputBlur($event)" 
        (input)="userTyping($event)"
        class="an-input-el"
    />
    <label [for]="id">
        {{label}}
    </label>
</div>
//Styles
.an-input{
    display: inline-block;
    position: relative;
    width: 100%;
    margin-bottom: 30px;
    & input, & textarea{
        padding: 15px;
        color: $an-color;
        border: none;
        outline: none;
        border: 2px solid $font-darker;
        border-radius: 2px;
        width: 100%;
        &.input-fly{
            border-color: $an-color;
        }
        &.input-fly-error{
            border-color: maroon;
        }
    }
    & label{
        position: absolute;
        left: 0;
        padding: 0 10px;
        font-size: 13px;
        transition: .1s;
        cursor: text;
        color: $font-darker; 
        font-size: 11px;
        &.label-fly{
            padding: 0px;
            color: $an-color;
        }
    }
}

Answer 1

一种角度方法是将样式作为输入属性传递给您的自定义输入，

@Input() styles: any;

并将其绑定到ngStyle属性

[styles]="styles"

演示：https：//stackblitz.com/edit/angular-ngstyle-as-sinput-property

ps ：正如提到使用::ng-deep的一位用户一样，建议不要这样做，并且很快就会被解释。更多信息在这里

Answer 2

您在SCSS中应用错误的语法，当您要选择一个具有两个选择器的元素时，使用Amperstand(＆amp;(。>

app-input{
    & .an-input{
        width: 100%;
    }
}

您正在选择具有> .an-input类的app-input 类型的所有元素，而不是具有.an-input类的app-input子元素。

因此，删除&：

app-input{
    .an-input{
        width: 100%;
        input{
            border-color: red;
        }
    }
}

更多信息：https：//css-tricks.com/the-sass-ampersand/