[SalesForce] Overwrite standard lightning web component css by class name

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?

Best Answer

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.

Related Topic