md-input-container: overwrite padding in mat-input-wrapper

Question

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:

<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):

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. 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?

Answer 1

Got almost the same problem.

Solution1:

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

or solution2:

/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.

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. .mat-input-wrapper is declared outside of your component, so angular won't apply any styles, defined in your component's css to it.

You can switch off this behaviour by specifying /deep/ before the selector (solution 1) or use special selector >>> which basically does the same.

For more info - Component styles

Answer 2

According to Angular docs, all 3 are deprecated (deprecated) /deep/, >>>, and ::ng-deep

According to Angular git issue, the use of ::ng-deep is the preferred solution for now days