web-dev-qa-db-ja.com

プレイグラウンドでLightning Webコンポーネントの「データテーブル」のTDSにいくつかのシンプルなスタイルを適用する方法は？

Lightning Webコンポーネントの遊び場 での作業。次のファイルとコードがあります。

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

私が開発者ツールを調べる>検査すると、スタイルタグ内のスタイルがレンダリングされ、要素には適用されません。

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

私が取り組んでいる遊び場へのリンク

javascripthtmlcsssalesforcesalesforce-lightning
5
Imran

私が作った遊び場へのリンクを見てください

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

https://sfdcfacts.com/lwc/color-columns-of-data-table-lwc/ からインスピレーションを得た

1
Vimal

loadStyle を使用して読むこともできます。これらはWebコンポーネントであるため、スタイルのスコープはそのコンポーネントのみです（この場合はbasicコンポーネント）。 loadStyleを使用すると、いくつかのグローバルスタイルルールを追加できます。

0
tcigrand