How to hide page header in lightning component

Question

I want to hide a page header from an appHomeTemplate I have looked at several similar questions but none of them give an answer.

I have used .THIS.slds-page-header { display: none; } in my page template but this does not seem to work. If I use inspect and add display none this hides the header. Using this in the Style section this does not work as: .THIS.slds-page-header { display: none; } what am I missing?

.slds-page-header {
    display: none;
    /* padding: 1rem 1rem; */
    /* border-bottom: 1px solid rgb(221, 219, 218); */
    /* border-radius: .25rem; */
    /* background: rgb(243, 242, 242); */
    /* background-clip: padding-box; */
    /* box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.10); */
    /* border: 1px solid rgb(221, 219, 218); */
}

Answer 1

For those who bump into this I solved this the following way:

The page Header part is a separate part, so we have to include an external CSS, in the component.

Create a CSS file with :

.slds-page-header{
display:none;
}

then Add this css file as a static resource.Name : (slds_page_header_hide)

Add the css to the component using ltng:require

<ltng:require styles="{!$Resource.slds_page_header_hide}" />