Question

我正在网页标题中构建一般搜索栏。它配置和工作正常，但我有一个小问题试图设计它。

目前它看起来像这样：

我希望它看起来更加精致，像这样：

我对输入框的形状和位置很好，但我想将图标和占位符文本对齐在框中心，而不是拥抱框的顶部并触摸边框。

这是我正在使用的html：

<md-input-container _ngcontent-c5="" color="accent" floatplaceholder="never" ng-reflect-color="accent" ng-reflect-float-placeholder="never" class="mat-input-container ng-untouched ng-pristine ng-valid">
    <div class="mat-input-wrapper">   
       <div class="mat-input-table"> 
           <!--bindings={"ng-reflect-ng-if": "0" }-->
           <div class="mat-input-infix"> 
               <input _ngcontent-c5="" id="search-person" mdinput="" placeholder="Search for a person" type="text" ng-reflect-is-disabled="false" ng-reflect-model="" ng-reflect-disabled="false" ng-reflect-id="search-missionaries" ng-reflect-placeholder="Search for a person" ng-reflect-type="text" class="ng-untouched ng-pristine mat-input-element ng-valid">
               <i _ngcontent-c5="" class="material-icons">search</i>
               <span class="mat-input-placeholder-wrapper"> 
                   <!--bindings={"ng-reflect-ng-if": "true"}-->
                   <label class="mat-input-placeholder mat-empty mat-accent" for="search-person">  Search for a person 
                       <!--bindings={"ng-reflect-ng-if": "false"}-->
                   </label> 
               </span> 
           </div> 
           <!--bindings={"ng-reflect-ng-if": "0"}-->
        </div> 
        <div class="mat-input-underline"> 
            <span class="mat-input-ripple mat-accent">
            </span> 
        </div> 
        <div class="mat-input-subscript-wrapper" ng-reflect-ng-switch="hint"> 
            <!--bindings={"ng-reflect-ng-switch-case": "error"}-->
            <!--bindings={"ng-reflect-ng-switch-case": "hint"}-->
            <div class="mat-input-hint-wrapper" style="opacity: 1; transform: translateY(0%);"> 
                <!--bindings={"ng-reflect-ng-if": ""}-->
                <div class="mat-input-hint-spacer">
                </div>  
            </div> 
        </div> 
    </div> 
</md-input-container>

这是我的CSS（使用LESS）：

md-input-container {
    margin-right: 10px;
    border-radius: 5px;
    background: @brand-off-white;
    #search-person {
        width: 230px;
    }
}

.mat-input-wrapper {
    padding: 5px 3px !important;
}

.material-icons {
    color: @brand-light-grey;
}

但是当我检查元素时，它不会从我的less文件中应用 md-input-wrapper 中包含的 padding：5px 3px 。我可以在浏览器的开发控制台中应用它，事情看起来就像我想要的那样，但我的实际代码不会应用它。

如何在 .mat-input-wrapper 类中覆盖填充的类规则？

Answer 1

得到了几乎相同的问题。

解决方案1：

md-input-container >>> .mat-input-wrapper { padding: 5px; 3px; }

或解决方案2：

/deep/ .mat-input-wrapper { padding: 5px; 3px; }

<强>解释

基本上，在开发组件时，您希望关联的样式仅应用于此组件。为此，angular为组件的元素添加了一个特殊属性，为css添加了额外的选择器。

因此，如果您的组件有<div>和样式div { color: red }，则角度会将其转换为<div _ng-content-c1>和div[_ng-content-c1] {color: red}，因此只有div＆＃ 39;组件内的s将受到影响。 .mat-input-wrapper在您的组件之外声明，因此angular不会应用在组件的css中定义的任何样式。

您可以通过在选择器（解决方案1）之前指定/deep/或使用基本相同的特殊选择器>>>来关闭此行为。

了解更多信息 - Component styles

Answer 2

根据Angular docs，所有3个都已弃用（已弃用）/ deep /，＆gt;＆gt;＆gt;和:: ng-deep

根据Angular git issue，使用:: ng-deep是现在的首选解决方案

md-input-container：在mat-input-wrapper中覆盖填充

2 个答案: