如何覆盖 Lightning Web 组件内部元素的 CSS答案

【问题标题】：How to Override CSS of Inner Elements of Lightning Web Component如何覆盖 Lightning Web 组件内部元素的 CSS
【发布时间】：2021-07-09 12:56:43
【问题描述】：

我有一个如下所示的 dataTable 组件：

<template>
  <lightning-datatable
    class="pw-table"
    key-field="id"
    columns={columns}
    data={data}
    hide-checkbox-column
  ></lightning-datatable>
</template>

现在我想写一些自定义 css 来使表头更高，

.pw-table {
  height: 300px;
}

但没用，那我该怎么做呢？我用了loadStyle但是失败了，不知道为什么？

import { loadStyle } from 'lightning/platformResourceLoader';
import accountCustom from '@salesforce/resourceUrl/accountCustom';

【问题讨论】：

标签： salesforce salesforce-lightning

【解决方案1】：

您应该将 Lightning 基础组件视为黑匣子。 LWC 的内部元素受到 Shadow DOM 和 Lightning Locker 的保护。您无法使用 CSS 设置它们的样式，也无法通过 JavaScript 与它们进行交互。

您可以设置顶级元素的样式（实际上就是您在此处所做的），但您不能设置组件内的元素样式。请参阅 Lightning Web 组件开发指南中的 CSS Style Sheets。

父组件可以为子组件设置样式，但它会将其设置为单个元素。

【讨论】：