2

I'm trying to set max-height property to slds-scrollable_y class inside lighting-datatable web component via css with:

.slds-crollable_y{
    max-height: 10rem !important;
}

But it's not working. Is it even possible to overwrite standard lwc css as it was in aura?

1
  • are you trying to say max height of whole table? Sep 30, 2019 at 15:01

3 Answers 3

6

No. Because of CSS Isolation, you can't generally monkey with the internals of a component, especially if it's in another namespace. The documentation says:

CSS styles defined in a parent component don’t leak into a child. In our example, a p style defined in the todoApp.css style sheet doesn’t style the p element in the c-todo-item component, because the styles don’t reach into the shadow tree. See CSS.

There is currently a loadStyle hack that works around this, but I expect it will eventually be fixed.

You should be able to specify a height for the entire table, which should auto-size the inner table accordingly:

lightning-datatable {
  min-height: 10rem;
}

This is because the Shadow DOM allows us to modify the "outside" of the component, such as its size, a border, etc, while not allowing us to modify the internal components.

4

As of Spring'21 you can now use styling hooks as a beta feature to override slds styles from base lightning components:

https://www.lightningdesignsystem.com/platforms/lightning/styling-hooks/

1
  • Update: not a beta feature any more: As of the 2.17.0 (Spring '22) release, styling hooks is officially designated for General Audience (GA) use
    – Bloke
    May 16, 2023 at 21:30
-2

I was able to override the standard styling of a slds class. For example, on a quick action modal there is a class called "slds-modal__container".

Keep in mind this is a hack, I'm sure it will be pulled by salesforce at some point but for now it solves the issue I had.

By creating a static resource with the following:

.slds-modal__container{
    max-width: 70rem !important;
    width:80% !important;
}

I was able to override the standard behavior. In your component you will need to reference your resource with the following:

<ltng:require styles="{!$Resource.{NAME_OF_RESOURCE}}" />    

You must log in to answer this question.

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