How to override lightning-input-rich-text CSS styling?

Question

I've included a <lightning-input-rich-text> </lightning-input-rich-text> component in html. When I click on component an border is added on focus. I want the border to be removed when I click inside the rich text area. Any Idea how to over ride the slds CSS styling? methods that I've tried are:

.THIS .slds-has-focus{
  border: none !important;
}

And

.THIS .slds-form-element__control{
  .slds-rich-text-editor{
    border-color:none !important;
    box-shadow: none !important;
    border: none !important;
  }

}

Answer 1

You are trying to override the CSS inside a lightning component. This was easily feasible with aura components, but not with LWC. In order to do that, your best approach would be to load your CSS as an static resource and use the loadStyle method in your rendered callback, instead of using the bundle CSS file.

Bear in mind that THIS is no longer required in LWC CSS files, only for aura.

In your JS:

import myStaticResource from '@salesforce/resourceUrl/myStaticResource';

renderedCallback() {
    loadStyle(this, myStaticResource + '/myStaticResource.css');
}

your CSS file should look something like:

lightning-input-rich-text .slds-has-focus {
  border: none !important;
}

but this part you will need to figure out yourself

You may want to refer to this link: Target inner elements of standard Lightning Web Components with CSS