Issue in applying css in lightning-datatable

Question

I am working in Visual studio code in LWC. I am trying to apply CSS to headers of lightning-datatable

HTML priceScreen.html

<lightning-datatable class= "table-test" data={accList} columns={columns} key-field="Id" selected-rows={selectedRows} >
</lightning-datatable>

CSS priceScreen.css

.THIS .table-test thead th span { 
    background-color: #16325c; 
    color: white}

Answer 1

You can't override the CSS of the Lightning-Datatable directly inside the Lightning Web Component because of Shadow DOM.

There is a workaround for this, but make sure you check Overwrite standard lightning web component CSS by class name before going for that.

---

Also the LWC CSS work in the exact same way the vanilla CSS does. So you don't need to mention the .THIS here. So your CSS should look like this. Still, note that this will not be applicable outside the shadow tree, and apparently the datatable.

.table-test thead th span { 
    background-color: #16325c; 
    color: white
}