6

Working in playground of lightning web components. I have following files and code:

basic.html

<template>
<div style="height: 300px;">
    <lightning-datatable
            key-field="id"
            data={data}
            columns={columns}>
    </lightning-datatable>
</div>    
</template>

basic.css

 td{
    background: red;
 }
 :host td{
    background: red;
   }

basic.js

import { LightningElement, track } from 'lwc';
import fetchDataHelper from './fetchDataHelper';

const columns = [
    { label: 'Label', fieldName: 'name' },
    { label: 'Website', fieldName: 'website', type: 'url' },
    { label: 'Phone', fieldName: 'phone', type: 'phone' },
    { label: 'Balance', fieldName: 'amount', type: 'currency' },
    { label: 'CloseAt', fieldName: 'closeAt', type: 'date' },
];

    export default class BasicDatatable extends LightningElement {
    @track data = [];
    @track columns = columns;

    async connectedCallback() {
        const data = await fetchDataHelper({ amountOfRecords: 100 });
        this.data = data;
    }
    }

When I look into developer tools > inspect it renders styles in a style tag and do not apply to the element: 

<style type="text/css">
    td[c-basic_basic]{background: red;}
    [c-basic_basic-host] td[c-basic_basic]{background: red;}
 </style>

Link to the play ground I am working on

Imran
  • 1,094
  • 1
  • 21
  • 41
  • Please provide a working example. The link you give is not accessible here. Idk why. – Nik Nov 26 '19 at 03:17

2 Answers2

0

Have a look at the link to the playground i have made

https://developer.salesforce.com/docs/component-library/tools/playground/S6hzg24v4/116/edit

Inspired from https://sfdcfacts.com/lwc/color-columns-of-data-table-lwc/

Vimal
  • 1,140
  • 1
  • 12
  • 26
0

You can also read up on using loadStyle. Since these are web components, the styles are scoped to that component only (basic component in this case). Using loadStyle will allow you to add some global styling rules.

tcigrand
  • 2,357
  • 2
  • 14
  • 24