javascript - 如何对 Playground 中闪电网络组件 "datatable"的 tds 应用一些简单的样式？

Question

在 playground of lightning web components 工作.我有以下文件和代码:

基本.html

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

基本的.css

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

基本.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;
    }
    }

当我查看开发人员工具>检查时，它会在样式标签中呈现样式并且不适用于元素:

<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

Answer 1

看看我制作的游乐场的链接

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

灵感来自 https://sfdcfacts.com/lwc/color-columns-of-data-table-lwc/