[SalesForce] Styling of lightning-datatable in LWC

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

Best Answer

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.

Related Topic