Override or append to the existing SLDS Classes.

You might wonder is there any way to override or append something to the existing SLDS classes generated by the salesforce. Yes there is a way to do it, that is what we are discussing here.

When ever you use lightning prefix components, behind the scene's there would be lot of internal slds classes generated.
We can extend these generated classes functionality by appending/overriding our custom css to the existing classes.

------------
component code
------------

<aura:component description="search form">
    <aura:attribute name="searchterm" type="string" default="dave"/>
 
      <lightning:input value="{!v.searchterm}" name="search term" label="Search term(s)" class="myclass"/>

</aura:component>

Out put as follows.

Now we want different border color for the input field. To do that, follow the below steps

inspect the code generated by the framework as below.

And then create your own css class append to the auto generated slds class.

-----------
Css code
------------
.THIS.myclass .slds-input {
    border-color:purple;
    border-width :8px;
}

Now you will see the expected  border with different color and border width.

Overall, we were able to append our own css to the existing lightning:input element.

Note: you cannot override standard styling of slds classes in LWC due to the Shadow DOM and the way that CSS works in LWC. Currently developers do not have a way to override/customize CSS that is derived from Base Components. Salesforce team is working on giving developers more options, but at this point of time they can't commit to a timeline.

help link : https://success.salesforce.com/answers?id=9063A000000ePZSQA2