Modifying the css of a lightning page?

Question

Is it possible to modify the css of a standard lightning page for a sf object?

What I was thinking of is insert a custom component but would that component be able to find an element on the rest of the page that not inside of it?

Is there a different way?

I want to use getElementsByClassName and rely on the class of a salesforce's element. I understand this is fragile and this class name can change at any time but this is the requirement I am working with.

Answer 1

Because of Locker Service and the Shadow DOM, there is no intended way to do what you're trying to do. There's some minor issues that allow loading CSS dynamically that may work, but this is not intended to supported and will not likely work in the future. You can use Branding to change some aspects of the Lightning Experience, however, which may suit your purposes.

Answer 2

As @sfdcfox mentioned, it's not supported and might not work in the future but if you still want to do it, you can put a component with a style tag in it that overrides the standard styles like below:

<!-- Hide the standard header in lightning --> 
<aura:html tag="style">
    .slds-global-header_container {
        display: none;
    }

    .slds-template_default.slds-brand-band:before {
        top: 0px;
    }

    section.panelSlide {
        top: 0px !important;
        height: 100% !important;
    }
</aura:html>