[英]md-input-container: overwrite padding in mat-input-wrapper
I am building a general search bar in the header of a webpage. 我正在网页的标题中构建一个通用搜索栏。 It is configured and works fine, but I am having a small problem trying to style it.
它配置和工作正常,但我有一个小问题试图设计它。
Currently it looks like this: 目前它看起来像这样:
I want it to look a bit more polished, like this: 我希望它看起来更加精致,像这样:
I am fine with the shape and position of the input box, but I would like to align the icon and placeholder text centered in the box instead of hugging the top of the box and touching the borders. 我对输入框的形状和位置很好,但我想将图标和占位符文本对齐在框中心,而不是拥抱框的顶部并触摸边框。
Here is the html I am working with: 这是我正在使用的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>
This is my CSS (using LESS): 这是我的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;
}
When I inspect the element however, it does not apply the padding: 5px 3px included in md-input-wrapper from my less file. 但是当我检查元素时,它不应用padding:5px 3px包含在我的less文件中的md-input-wrapper中 。 I can apply it in the development console in my browser and things look just how I want, but my actual code won't apply it.
我可以在浏览器的开发控制台中应用它,事情看起来就像我想要的那样,但我的实际代码不会应用它。
How can I overwrite the class rules for padding in my .mat-input-wrapper class? 如何在我的.mat-input-wrapper类中覆盖填充的类规则?
Got almost the same problem. 得到了几乎相同的问题。
Solution1: 解决方法1:
md-input-container >>> .mat-input-wrapper { padding: 5px; 3px; }
or solution2: 或解决方案2:
/deep/ .mat-input-wrapper { padding: 5px; 3px; }
Explanation: 说明:
Basically when you develop a component, you want the associated styles to be applied only to this component. 基本上,在开发组件时,您希望关联的样式仅应用于此组件。 To achieve this, angular adds a special attribute to the elements of your component and extra selectors to css.
为此,angular为组件的元素添加了一个特殊属性,为css添加了额外的选择器。
So, if your component has a <div>
and a style div { color: red }
, then angular converts it to <div _ng-content-c1>
and div[_ng-content-c1] {color: red}
, so only div
's inside your component will be affected. 因此,如果你的组件有一个
<div>
和一个样式div { color: red }
,那么angular会将它转换为<div _ng-content-c1>
和div[_ng-content-c1] {color: red}
,所以只有你组件内的div
会受到影响。 .mat-input-wrapper
is declared outside of your component, so angular won't apply any styles, defined in your component's css to it. .mat-input-wrapper
在组件之外声明,因此angular不会应用组件的css中定义的任何样式。
You can switch off this behaviour by specifying /deep/
before the selector (solution 1) or use special selector >>>
which basically does the same. 您可以通过在选择器(解决方案1)之前指定
/deep/
或使用基本相同的特殊选择器>>>
来关闭此行为。
For more info - Component styles 有关详细信息 - 组件样式
According to Angular docs , all 3 are deprecated (deprecated) /deep/, >>>, and ::ng-deep 根据Angular文档 ,所有3个都被弃用(不推荐)/ deep /,>>>和:: ng-deep
According to Angular git issue , the use of ::ng-deep is the preferred solution for now days 根据Angular git问题 ,使用:: ng-deep是现在的首选解决方案
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.