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} >

CSS priceScreen.css

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

1 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
  • I tried removing 'THIS', but its not working Oct 12, 2020 at 11:22
  • @AthiraVenugopal as I mentioned it will not work due to shadow dom. Check the workaround mentioned. Oct 12, 2020 at 11:24
  • Thank you, it worked using loadStyle(). But why the header color blinked out when hover over it? How can I avoid it? Oct 12, 2020 at 12:01
  • No idea, try inspecting that. Oct 12, 2020 at 12:03
  • Does anyone know if this will work in an embedded lightning web component ( i.e VF >> AuraAPP > lwc component)
    – Soji
    Jul 26 at 10:26

You must log in to answer this question.

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