css - md输入容器: overwrite padding in mat-input-wrapper

我正在网页的标题中建立一个常规的搜索栏。它已经配置好并且可以正常工作，但是我在尝试设置样式时遇到了一个小问题。

当前看起来像这样:



我希望它看起来更加优美，像这样:



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

这是我正在使用的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;
}

但是，当我检查该元素时，它不会应用填充:5px 3px包含在我的less文件的md-input-wrapper中。我可以在浏览器的开发控制台中应用它，一切看起来都和我想要的一样，但是我的实际代码不会应用它。

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

最佳答案

遇到了几乎相同的问题。

解决方案1:

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

或solution2:

/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

关于css - md输入容器: overwrite padding in mat-input-wrapper，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44376929/