0

I am creating a LWC and i was wondering if it is possible to edit the border-color or background-color of the checkbox in a datatable.

enter image description here

fx if my html datatable looks something like this:

<div if:true={MyData}>
        <lightning-datatable data={MyData} 
        columns={columns} 
        key-field="id" max-row-selection="2" 
        onrowselection={rowSelected} 
        selected-rows={preSelectedRows}>
        </lightning-datatable>

When i inspect element in a browser, i see the css class names etc as shown below. Is it somehow possible to "override" this with my own values?

enter image description here

2

No. It's not possible to style the inner components of a component, as the component itself is exposed to the parent as a single discrete component. You could, for example, add a border to the lightning-datatable itself, but not to anything inside of it.

Documentation:

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.

4
  • Hi sddcfox, thanks for your answer. That is a pity this is not possible. Do you know if this only applies to LWCs? Would it be possible using Aura e.g? Apr 20 '20 at 18:29
  • 2
    @AndersenAnd Actually, in LWC, the appropriate solution would be to "extend" the lightning-datatable and use a custom cell type. In Aura, it wouldn't be possible at all.
    – sfdcfox
    Apr 20 '20 at 18:31
  • @sfdcfox Would that apply towards rounded corners as well? I see that most standard components have the rounded corners. Would that not be possible? Aug 31 at 17:58
  • @bradfordgray As far as I'm aware, that's still the case. You might be interested in looking at npm lightning-base-components if you want to copy the original components and style them/change their behavior/etc as you desire.
    – sfdcfox
    Aug 31 at 18:10
0

Yes, its possible by creating an external stylesheet i.e for eg:lwcCustomStyle.css(in this you can overwrite the css as per your needs) and storing the same in the static resource named lwcCustomStyle and then include the static resource in your LWC component.js as mentioned below.

import lwcCustomStyle from '@salesforce/resourceUrl/lwcCustomStyle';
import { loadStyle } from 'lightning/platformResourceLoader'; 
export default class CommunityTable extends LightningElement {
       renderedCallback() {
        Promise.all([
            loadStyle(this, lwcCustomStyle)
        ])
            .then(() => {
                console.log("All CSS are loaded. perform any initialization function.")
            })
            .catch(error => {
                console.log("failed to load the css");
            });
    }
  }
1
  • You're strongly discouraged from doing this (at least, in Salesforce), because you will also affect parts of the UI you should not be affecting. In addition, this isn't supposed to work with a true native shadow DOM, so some care should be taken if you use this.
    – sfdcfox
    Aug 31 at 18:08

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.