时间戳

首页 > 解决方案 > 如何覆盖 Lightning Web 组件内部元素的 CSS

salesforce - 如何覆盖 Lightning Web 组件内部元素的 CSS

问题描述

我有一个 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';

标签： salesforcesalesforce-lightning

解决方案

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

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

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

推荐阅读