1

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;
  }

}

Focus Border added

1 Answer 1

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

3
  • Thank you for your answer, So in order to do that I'd have to create a CSS file in static resource instead of LWC bundle, and use loadStyle method in rendered callback. Should I select the <lightning-input-rich-text> </lightning-input-rich-text> using template query selector, and the apply style attribute, or should I just load CSS on rendered callback? Apr 20, 2021 at 4:56
  • More over how should I apply the styling hook? Will this work? .slds-has-focus{ border: none !important; } Apr 20, 2021 at 5:01
  • 1
    I have edited my answer including that information Apr 20, 2021 at 9:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.