1

How can I access the top level CSS in LWC? In Aura component I use 

<aura:html tag="style">
    .slds-modal__container { 
        width : 60% !important; max-width : 80% !important; 
    } 
</aura:html>

what is the alternative method in Lightning Web Component?

Improve this question

2 Answers 2

Reset to default
4

Not sure what you mean by "top level CSS" here. AFAIK you cannot modify the SLDS CSS that other components are using; you can only modify the SLDS CSS for your component.

LWC automatically scopes the CSS you include in your component to apply to that component only via your component's name added as an attribute. See the answer on How to make buttons in a lightning-datatable smaller in LWC? for a bit more information.

Improve this answer
0

You need to write this in .css file of the Lightning Web Component. In Salesforce, you don't get the .css file by default, you need to create it from VS Code. Just create a file in your components folder name it like componentName.css, now add your CSS code in that.

See the playground Demo.

Improve this answer
3
  • I am asking about adding style to the corresponding component. Please refer the <aura:html> tag in aura component. I just want an alternative for that in LWC. Thank you.
    – Daniel Deepak
    Commented Jan 15, 2020 at 9:09
  • @DanielDeepak are you looking for a dynamic component or unescaped HTML in Lwc?
    – Rahul Gawale
    Commented Jan 15, 2020 at 9:51
  • Unescaped HTML exactly, Rahul. Thanks in advance.
    – Daniel Deepak
    Commented Jan 16, 2020 at 14:36

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .