web-dev-qa-db-fra.com

Comment appliquer des styles simples à des tds de "datatable" de composant web de foudre dans une aire de jeux?

Travailler dans aire de jeux de composants web de foudre . J'ai les fichiers et le code suivants:

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

Lorsque je regarde dans les outils de développement> inspecter, il rend les styles dans une balise de style et ne s'applique pas à l'élément:

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

Lien vers le terrain de jeu sur lequel je travaille

javascripthtmlcsssalesforcesalesforce-lightning
5
Imran

Jetez un œil au lien vers le terrain de jeu que j'ai créé

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

Inspiré de https://sfdcfacts.com/lwc/color-columns-of-data-table-lwc/

1
Vimal

Vous pouvez également lire sur l'utilisation de loadStyle . Puisqu'il s'agit de composants Web, les styles sont limités à ce composant uniquement (composant basic dans ce cas). L'utilisation de loadStyle vous permettra d'ajouter des règles de style globales.

0
tcigrand