md-input-container：覆盖 mat-input-wrapper 中的填充答案

【问题标题】：md-input-container: overwrite padding in mat-input-wrappermd-input-container：覆盖 mat-input-wrapper 中的填充
【发布时间】：2018-03-20 04:04:38
【问题描述】：

我正在网页标题中构建一个通用搜索栏。它已配置并且工作正常，但我在尝试设置它的样式时遇到了一个小问题。

目前看起来是这样的：

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

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

这是我正在使用的 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 类中覆盖用于填充的类规则？

【问题讨论】：

标签： css angular less

【解决方案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 }，那么 Angular 会将其转换为<div _ng-content-c1> 和div[_ng-content-c1] {color: red}，因此只有组件内部的div 会受到影响。 .mat-input-wrapper 在组件外部声明，因此 Angular 不会应用在组件的 css 中定义的任何样式。

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

更多信息 - Component styles

【讨论】：

【解决方案2】：

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

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

【讨论】：