We are trying to override the app.css in a custom lightning component embed in quick action to increase the width of the quick action screen. For this we are try to use the '<style></style>'. But it not supported. However tried to use the <head></head> tag. Still it didn't worked out. What is the alternate or workaround for the same ? how to overwrite app.css styles with lightning components Above link we tried which was working in the 2017 release but currently not working.

  • have to tried to upload the css in static resource and then add that static resource in component? try this? – Ratan Paul Aug 10 at 10:18

Upload the following stylesheet as the static resource and include that in your lightning component.

.cuf-content{
   padding:0 !important;
}
.slds-p-around--medium{
   padding:0 !important;
}
.slds-modal__container{        
   width:80% !important;
   max-width:80% !important;
}
.slds-modal__content{
   overflow-y:hidden !important;
   height:unset !important;
   max-height:unset !important;
}

You can also update the style using jQuery on the component load.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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