CSS归档 - 白白随笔

要为您的组件提供 Lightning Experience 外观，请使用 Lightning Design System。要走自己的路，请编写自己的 CSS。

使用 Lightning Design System 设置组件样式

Salesforce Lightning Design System （SLDS）是一个 CSS 框架，可提供与 Lightning Experience 一致的外观。使用 SLDS 样式为您的自定义 Lightning Web 组件提供与 Salesforce 一致的 UI，而无需对我们的样式进行逆向工程。最重要的是，它只适用于在 Lightning Experience 和 Salesforce 移动应用程序中运行的 Lightning 组件。

提示

交互式基本组件示例可在组件参考中找到。

使用基本 Lightning 组件

命名空间中的基本组件使用 Lightning Design System 样式。许多基本组件都是根据 SLDS 组件蓝图构建的。蓝图与框架无关，可访问 HTML 和 CSS。一些示例包括、和组件。lightninglightning-accordionlightning-cardlightning-tree

基本组件提供了一个属性，以便您可以将 SLDS 实用程序类或定制类添加到组件的外部元素中。例如，要将边距实用程序类应用于基本组件，请使用。这里它用于增加按钮之间的边距。classlightning-buttonclass="slds-m-left_medium"

<template>
  <lightning-button label="Submit" title="submit" onclick={handleSubmit}></lightning-button>
  <lightning-button
    variant="brand"
    label="Cancel"
    title="cancel"
    onclick={handleCancel}
    class="slds-m-left_medium"
  ></lightning-button>
</template>

某些组件提供属性，以便您可以轻松地应用设计变体。variant

重要

在设置组件样式时，不要依赖基本 Lightning 组件的内部标记或 CSS 类，因为它们可能会在将来的版本中更改。不支持覆盖基本组件样式，除非使用记录的样式挂钩。请参阅样式组件的反模式。

使用基本 Lightning 组件设计变体和实用程序类

要更改基本 Lightning 组件的样式，请首先检查“组件参考”以查看该组件是否有设计变体。要更改组件的间距，例如对齐方式、填充、边距甚至其排版，请使用 Lightning Design System 实用程序类。

使用样式挂钩覆盖默认样式

如果设计变体和实用程序类不符合您的要求，请考虑设置挂钩样式。有关更多信息，请参阅使用 Lightning Design System 样式挂钩设置组件样式。

应用自定义 CSS类

如果样式挂钩不适用于您的用例，请尝试使用具有全局访问权限的设计令牌。

提示

从 24 年冬季开始，我们建议您尽可能使用全局颜色样式挂钩而不是设计标记，以符合 Web 内容可访问性指南（WCAG） 2.1 颜色对比度标准。请参阅 Lightning Design System：迁移指南。

如果全局设计标记不起作用，请创建自定义 CSS 类，而不是重写 SLDS 类。创建一个类，而不是以您不拥有的类名为目标，因为该类名可能会更改。例如，不要以为目标，因为它是基本组件内部标记的一部分。相反，创建一个自定义类并将其传递到 class 属性中。.slds-input

位于 Lightning Experience 或 Salesforce 移动应用程序中的自定义组件可以在没有任何语句或静态资源的情况下使用 Lightning Design System。只需将 Lightning Design System CSS 类分配给 HTML 元素即可。import

/* Do this */
.my-custom-styles {
  padding: var(--lwc-spacingMedium); /* --lwc-spacingMedium: 16px; */
}

/* DON’T DO THIS */
.slds-button {
  padding: 16px;
}

以增量方式应用样式。

/* Do this */
.my-style {
  padding: var(--scoped-spacing);
}

/* DON’T DO THIS */
.slds-scoped-notification {
  padding: var(--scoped-spacing);
}

<div class="slds-scoped-notification my-style"></div>

养成良好的CSS习惯，不要让选择器过载。

/* Don’t do this */
button.button {
  ...;
}
.card > * {
  ...;
}
.button {
  margin-bottom: 18px !important;
}
body.container > div.sidebar > article.card {
  ...;
}

从基础组件创建自定义组件

要构建 Lightning Web 组件，请通过将较小的基本组件组合成一个更复杂的自定义组件来组合它。尝试从按钮和媒体对象等组件构建您的设计。使用实用程序（例如网格和间距类）进行布局。当您向组件添加新功能时，请在 Lightning Design System 中搜索有效的模式，并将这些类应用于模板。lightning

例如，使用实用程序类更改标头大小或向容器添加填充。div

<template>
  <h1 class="slds-text-heading_large">SLDS Example</h1>
  <div class="slds-p-top_medium">
    <p>Hello!</p>
  </div>
</template>

从 Lightning Design 系统蓝图创建自定义组件

如果您找不到适合您的用例的基本组件，请找到最接近的 SLDS 蓝图来帮助您构建组件。请参见从 SLDS 蓝图创建组件。

使用基本 Lightning 组件设计变体

许多基本的 Lightning 组件都有多种设计变体。每个设计变体都赋予组件不同的外观。

基础组件设计变体对应于闪电设计系统（SLDS）中的变体。例如，支持将不同文本和背景颜色应用于按钮的设计变体。lightning-button

如果组件具有设计变体，则该组件具有属性。使用该属性选取设计变体。variantvariant

本示例创建一个具有设计变体的按钮，该按钮在按钮上提供蓝色背景色。brand

<lightning-button
  variant="brand"
  label="Submit"
  title="submit form"
  onclick={handleClick}
></lightning-button>

如果未指定，或者指定了不支持的值，则使用默认值。对于，缺省值为。variantlightning-buttonneutral

如果您没有看到您喜欢的设计变体，或者组件没有属性，请使用 Lightning Design System 类来实现您想要的样式。variant

例如，要将边距实用程序类应用于基本组件，请使用。lightning-buttonclass="slds-m-left_medium"

<lightning-button
  variant="brand"
  label="Submit"
  title="submit"
  onclick={handleSubmit}
  class="slds-m-left_medium"
></lightning-button>

还可以将实用工具类应用于嵌套在某些基本组件中的元素，如以下示例所示。基本组件的主体使用填充实用程序类。lightning-cardslds-p-horizontal_small

<lightning-card title="Hello">
  <lightning-button label="New" slot="actions"></lightning-button>
  <p class="slds-p-horizontal_small">Card Body (custom component)</p>
  <p slot="footer">Card Footer</p>
</lightning-card>

如果找不到合适的设计变体或 SLDS 类，请考虑使用样式挂钩。

提示

在“组件参考”中查看基本组件的设计变体和交互式示例。

使用 Lightning Design System 样式钩子设置组件样式

借助 Salesforce Lightning Design System （SLDS）样式挂钩，可以轻松自定义组件样式并表达您的品牌。样式挂钩提供与 SLDS 组件蓝图和设计变体相对应的 CSS 自定义属性。要自定义 SLDS 样式，请在组件的样式表中声明相应的自定义属性。您可以使用自定义属性来设置基本组件和自定义组件的样式。

提示

要更改基本 Lightning 组件的样式，请首先检查该组件是否有设计变体。要更改组件的间距，例如对齐方式、填充、边距，甚至其排版，请查看 Lightning Design System 实用程序类。如果这些技术不适用于您的用例，请尝试 SLDS 样式挂钩。

样式钩子是 SLDS 样式表中的占位符，例如，它使您能够使用相应的 CSS 自定义属性来自定义样式。var(--slds-c-badge--color-background, #ecebea)--slds-c-badge-color-background

CSS 定制属性对应于 SLDS 组件蓝图及其设计变体。例如，自定义属性与具有品牌变体的按钮蓝图相对应。--slds-c-button-brand-*

组件级与全局颜色样式挂钩

组件级样式挂钩（）使您能够更新特定组件中的属性。例如，若要将较粗的边框应用于单个按钮，请编辑该按钮的组件挂钩，它不会影响任何其他组件。请参阅 Lightning Design System： Styling Hooks。--slds-c-*

全局颜色样式挂钩（）是预定义的值，用于在应用中全局使用。例如，若要重新命名应用程序，请使用全局挂钩对正在使用的所有组件进行更改。请参阅 Lightning Design System： Global Color Styling Hooks。--slds-g-*

我们建议您进行的任何颜色自定义都符合 Web 内容辅助功能指南（WCAG） 2.1 文本和非文本颜色对比度标准。请参阅 Lightning Design System：迁移指南。

组件级样式钩子示例

让我们看一个 Lightning Web 组件，该组件实现了带有品牌变体的 SLDS 按钮蓝图，该蓝图将背景颜色转换为标准 Salesforce 蓝色。

<!-- myButton.html -->
<template>
  <button class="slds-button slds-button_brand">Submit</button></div>
</template>

重要

不要直接覆盖 SLDS 类，如本示例所示。

/* myButton.css */
/* Anti-pattern - Don't do this */
.slds-button_brand {
  background-color: purple;
}

不支持 CSS 覆盖，因为 SLDS 类和基本组件内部结构在将来的发行版中可能会更改。替代可能会过时，不再按预期工作。

请改用 CSS 自定义属性，如下例所示。

要对品牌变体应用不同的背景颜色，请指定相应的 CSS 自定义属性，即。要使用自定义样式定位组件中的所有元素，请使用 ：host 选择器。--slds-c-button-brand-color-background

/* myButton.css */
:host {
  --slds-c-button-brand-color-background: purple;
  --slds-c-button-brand-color-border: purple;
  /* Other CSS custom properties here */
}

或者，您可以使用其他选择器（如元素或自定义类）来限定自定义范围。

基本组件实现 SLDS 组件蓝图并使用 SLDS 样式。要在基本组件（如）上自定义 SLDS 样式，请使用相应的 CSS 自定义属性。lightning-button

<!-- myBaseButton.html -->
<template>
  <lightning-button variant="brand" label="Submit" onclick={handleClick}></lightning-button>
</template>

/* myBaseButton.css */
:host {
  --slds-c-button-brand-color-background: orange;
  --slds-c-button-brand-color-border: orange;
  /* Other CSS custom properties here */
}

注意

有关样式挂钩的完整列表，请参阅每个组件的蓝图。例如，Buttons 样式挂钩列在 lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview 中。若要了解有关设置挂钩样式的详细信息，请参阅 lightningdesignsystem.com/platforms/lightning/styling-hooks/。

支持限制

组件蓝图

这些 Lightning Design System 组件蓝图及其 CSS 自定义属性在基础组件上不受支持。

模态 – 模态组件蓝图与基础组件不对应。
Toast – 模块不支持自定义属性。lightning/platformShowToastEvent--slds-c-toast-*
工具提示 – 组件不支持自定义属性。lightning-helptext--slds-c-tooltip-*

链接

不支持使用自定义属性设置链接的样式。链接用于基本组件（如和）和模块中。lightning-breadcrumblightning-formatted-*lightning/navigation表单元素

不支持使用自定义属性设置表单元素的样式。表单元素用于,,,组件中。lightning-input-*lightning-checkbox-grouplightning-radio-grouplightning-textarea

助您构建自己的自定义组件。

首先，我们假设您已经用尽了“组件引用”中可用的基本组件列表，并且您无法使用样式挂钩自定义基本组件上的样式以满足您的要求。

要从 SLDS 蓝图构建组件，请搜索 SLDS 蓝图目录以查找最接近您的组件的设计。如果 SLDS 蓝图具有相应的基本组件，则该蓝图在页面右上角有一个 Lightning 组件按钮（1）。每个蓝图都提供了其设备支持（2）的详细信息 – 自适应、响应式或仅限桌面。自适应蓝图具有非桌面断点的标记，而响应式蓝图则可跨屏幕大小优雅地缩放。

尽管基本组件实现了 SLDS 样式，但并非所有基本组件都支持移动屏幕。基本组件文档中列出了支持。

例如，数据表 SLDS 蓝图是自适应的，但基本组件不支持移动设备。此外，请考虑自适应选项卡 SLDS 蓝图，其中选项卡在移动屏幕上堆叠并充当按钮。相应的不支持此移动行为。lightning-datatablelightning-tabset

从基本变化开始

假设您要创建一个作用域通知，并且您知道没有相应的 Lightning Web 组件。从 SLDS 蓝图上的基本变体开始，然后从那里开始构建。首先，将响应式基本变体标记复制并粘贴到模板中。

<template>
  <div
    class="slds-scoped-notification slds-media slds-media_center slds-scoped-notification_light"
    role="status"
  >
    <div class="slds-media__figure">
      <span class="slds-icon_container slds-icon-utility-info" title="information">
        <svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
        </svg>
        <span class="slds-assistive-text">information</span>
      </span>
    </div>
    <div class="slds-media__body">
      <p>
        It looks as if duplicates exist for this lead.
        <a href="javascript:void(0);">View Duplicates.</a>
      </p>
    </div>
  </div>
</template>

通知在标记中包含一个图标。将图标替换为基本组件。svg<div class="slds-media__figure">lightning-icon

<template>
  <div
    class="slds-scoped-notification slds-media slds-media_center slds-scoped-notification_light"
    role="status"
  >
    <div class="slds-media__figure">
      <lightning-icon
        icon-name="utility:info"
        alternative-text="information"
        size="small"
      ></lightning-icon>
    </div>
    <div class="slds-media__body">
      <p>
        It looks as if duplicates exist for this lead.
        <a href="javascript:void(0);">View Duplicates.</a>
      </p>
    </div>
  </div>
</template>

将消息移动到组件的 JavaScript 文件，并将属性绑定到模板。message

<template>
  <div
    class="slds-scoped-notification slds-media slds-media_center slds-scoped-notification_light"
    role="status"
  >
    <div class="slds-media__figure">
      <lightning-icon
        icon-name="utility:info"
        alternative-text="information"
        size="small"
      ></lightning-icon>
    </div>
    <div class="slds-media__body">
      <p>{message}</p>
    </div>
  </div>
</template>

import { LightningElement, api } from "lwc";

export default class ScopedNotification extends LightningElement {
  @api message = "It looks as if duplicates exist ...";
}

创建样式主题和变体

作用域通知蓝图包括要在组件中捕获的不同主题（浅色和深色）。使用 getter 函数返回所选主题的类名。

import { LightningElement, api } from "lwc";

export default class ScopedNotification extends LightningElement {
  @api message = "Your message here";
  @api theme = "";

  get scopedNotificationClass() {
    let className = "slds-scoped-notification slds-media slds-media_center";
    if (this.theme === "light") {
      className += " slds-scoped-notification_light";
    }
    if (this.theme === "dark") {
      className += " slds-scoped-notification_dark";
    }
    return className;
  }
}

更改主题时，图标样式会更改。深色主题使用反向变体。添加一个 getter 以返回正确的变体。

get iconVariant() {
  let iconVariant = null;

  if (this.theme == 'dark') {
    iconVariant = 'inverse';
  }

  return iconVariant;
}

更新标记，使其根据您使用的主题进行调整。从蓝图中修改此静态标记以使用动态样式。

<div
  class="slds-scoped-notification
    slds-media
    slds-media_center
    slds-scoped-notification_light"
  role="status"
></div>

将模板中的类绑定到 getter。scopedNotificationClass

<div class={scopedNotificationClass} role="status"></div>

同样，将 variant 属性绑定到 getter。lightning-iconiconVariant

<lightning-icon
  icon-name="utility:info"
  alternative-text="information"
  size="small"
  variant={iconVariant}
></lightning-icon>

实现组件

您的组件已准备好开始操作。您可以在其他组件中使用它，也可以将其包含在 Lightning 应用程序生成器的页面上。

此示例使用另一个 Lightning Web 组件中的组件。该示例提供响应式网格布局，并与 Tabs SLDS 蓝图相对应。c-scoped-notificationlightning-layoutlightning-tabset

<lightning-card>
  <lightning-layout multiple-rows>
    <lightning-layout-item size="12" small-device-size="9" padding="around-small">
      <lightning-tabset>
        <lightning-tab label="Item one">
          <div class="slds-m-bottom_small">
            <c-scoped-notification message="Hello notification!" theme="light">
            </c-scoped-notification>
          </div>
        </lightning-tab>
        <lightning-tab label="Item two"> Tab 2 content here </lightning-tab>
      </lightning-tabset>
    </lightning-layout-item>
    <lightning-layout-item size="12" small-device-size="3" padding="around-small">
      <p>Sidebar Content Goes Here</p>
    </lightning-layout-item>
  </lightning-layout>
</lightning-card>

由于我们指定，第一个中的内容占据了平板电脑或台式机上屏幕宽度的 75%（480 px 或更响应的断点）。在移动设备上查看时，将内容调整为占据屏幕宽度的 100%。请参阅创建响应式布局。small-device-size="9"lightning-layout-itemsize="12"

使用 Lightning Design System Design 令牌

设计标记是存储视觉设计属性的命名实体，例如边距和间距值、字体大小和系列或颜色的十六进制值。

提示

在 Lightning Web 组件中使用 CSS 变量来访问 Lightning Design System 设计令牌。Lightning Web 组件可以使用任何标记为“全局访问”的 Lightning 设计系统设计令牌。

重要

如果收到错误：，则可能是您使用的令牌未标记为“全局访问”。使用全局令牌或使用自定义 Aura 设计令牌。No TOKEN named {tokenName} found

要在 Lightning Web 组件的 CSS 中引用设计令牌，请使用前缀并引用中的令牌名称。--lwc-camelCase

/* myWebComponent.css */
div {
  margin-right: var(--lwc-spacingSmall);
}

注意

在编译时，我们将变量替换为它们的实际值，这意味着在运行时，对变量的引用不起作用。例如，不能使用标准 API 或变量。CSSStyleDeclaration.getPropertyValue()CSSStyleDeclaration.setPropertyValue()

使用自定义 Aura Token

Lightning Web 组件的 CSS 文件可以使用在您的组织中创建或从非托管软件包安装的自定义 Aura 令牌。

将视觉设计的基本价值捕获到自定义 Aura Token中。定义一次令牌值，然后在 Lightning 组件的 CSS 中重复使用它。令牌可以轻松确保您的设计保持一致，甚至更容易随着设计的发展而更新设计。

提示

从 24 年冬季开始，我们建议您尽可能使用全局颜色样式挂钩而不是自定义 Aura 令牌，以符合 Web 内容可访问性指南（WCAG） 2.1 颜色对比度标准。请参阅 Lightning Design System：迁移指南。

通过创建 Lightning Token捆绑包，在开发者控制台中创建自定义 Aura Token。例如，此令牌捆绑包具有一个名为的自定义 Aura 令牌。myBackgroundColor

<aura:tokens>
  <aura:token name="myBackgroundColor" value="#f4f6f9" />
</aura:tokens>

自定义 Aura 令牌并不新鲜，但现在您可以使用标准 CSS 函数在 Lightning Web 组件的 CSS 文件中使用它们。在自定义 Aura 令牌之前添加。var()--c-

/* myLightningWebComponent.css */
color: var(--c-myBackgroundColor);

使用 CSS 样式表设置组件样式
若要将一组样式与组件捆绑在一起，请在组件的文件夹中创建一个与组件同名的样式表。样式表将自动应用于组件。如果要使用一个或多个样式表设置组件的样式，请配置 static 属性。stylesheets

一个组件的文件夹中只能有一个样式表。样式表使用标准的 CSS 语法，您可以使用大多数选择器。样式表可以从多个 CSS 模块导入样式规则。

在组件的样式表中定义的样式的范围限定为该组件。此规则允许组件在不同的上下文中重用，而不会丢失其样式。它还可以防止组件的样式覆盖页面其他部分的样式。

深入探讨：Lightning Web 组件中的影子 DOM 和 CSS

此示例演示了在父组件中定义的 CSS 样式如何无法进入子组件。有两个组件，以及 .每个组件都包含一个标记。样式表将样式定义为 。运行代码时，样式仅适用于父级中的标记，而不适用于嵌套子级中的标记。c-parentc-child<h1>parent.cssh1xx-large<h1><h1>

<!-- parent.html -->
<template>
  <h1>To Do List (h1)</h1>
  <c-child></c-child>
</template>
/* parent.css */
h1 {
  font-size: xx-large;
}
<!-- child.html -->
<template>
  <h1>To Do Item (h1)</h1>
</template>
Parent text is extra large. Child text is normal size.

父组件可以设置子组件的样式，但它将其样式设置为单个元素。父母不能接触孩子。让我们添加一个选择器，用于定义子组件周围的边框。c-childparent.css

/* parent.css */
h1 {
  font-size: xx-large;
}

c-child {
  display: block;
  border: 2px solid red;
}
The child component has a red box around it. 

现在，让我们从组件自己的样式表 .c-childchild.css

在添加选择器之前，让我们先删除选择器以删除红色框。从组件及其父级设置组件样式不是一个好的做法，因为它可能会造成混淆并产生意外的结果。这是删除的。child.cssc-childparent.cssparent.cssc-child

/* parent.css */
h1 {
  font-size: xx-large;
}
组件的样式表可以到达并设置其自己的元素的样式，在此示例中为 .c-child

不要使用选择器，而应使用 ：host 选择器。c-child

/* child.css */
:host {
  display: block;
  background: yellow;
}
Child component's background is yellow.

通过使用 以 host 元素为目标，我们已将样式应用于 ，from 。:host<c-child>child.css

选择器接受可选的选择器列表。若要匹配，主机元素必须具有与传递的选择器匹配的类。为了了解选择器的工作原理，让我们重写示例代码，使其看起来更像一个真正的应用程序。我们添加一个 to，以便我们可以在待办事项列表上传递项目的名称。:host:host<slot>c-child

<!-- child.html -->
<template>
  <h1>To Do Item</h1>
  <slot></slot>
</template>
让我们在子组件中设置样式，但要让它比我们在父组件中定义的要小一些。我们还将所有列表项设置为浅灰色，但活动项除外，该活动项为浅绿色。h1largexx-largeh1

/* child.css */
h1 {
  font-size: large;
}
:host {
  display: block;
  background: lightgray;
}

:host(.active) {
  background-color: lightgreen;
}
在父级中，让我们添加三个组件并使一个处于活动状态。在实际应用中，活动组件将是所选项目。c-child

<!-- parent.html -->
<template>
  <h1>To Do List</h1>
  <c-child>Buy potatoes</c-child>
  <c-child>Donate to a good cause</c-child>
  <c-child class="active">Plan a party</c-child>
</template>
/* parent.css */

h1 {
  font-size: xx-large;
}
To do list with active to do item in light green. 

CSS 支持和性能影响

CSS 作用域与 CSS 作用域模块级别 1 标准匹配，但有一些例外。

不支持 ：host-context（） 伪类函数。
不支持 ：:p art 伪元素。
CSS 中不支持 ID 选择器。确保值在 HTML 模板中是唯一的。呈现模板时，值可能会转换为全局唯一值。如果在 CSS 中使用 ID 选择器，它将与转换后的 ID 不匹配。idid
LWC 不会将组件的自定义公共属性反映到其相应的 HTML 属性中。若要为子元素提供标识以进行样式设置，请使用属性或属性。classdata-*
作用域 CSS 会影响性能，因此请谨慎使用。每个选择器链都有作用域，传递给的每个复合表达式都分布到多个选择器中。这种转换增加了生成的 CSS 的大小和复杂性。这些增加意味着网络上的位数更多、解析时间更长、样式重新计算时间更长。:host()

为了确保 CSS 封装，每个元素都有一个额外的属性，这也增加了渲染时间。例如，元素具有属性。<c-parent>c-parent_parent-host

<c-parent c-parent_parent-host>
  <h1 c-parent_parent>To Do List</h1>
  <c-child c-parent_parent c-child_child-host>
    <h1 c-child_child>To Do Item</h1>
  </c-child>
  <c-child class="active" c-parent_parent c-child_child-host>
    <h1 c-child_child>To Do Item</h1>
  </c-child>
</c-parent>
将 CSS 样式表分配给组件

若要使用一个或多个样式表自定义组件，请将 static 属性添加到构造函数中。此属性接受样式表数组，其默认值为空数组。您可以设置光 DOM 和阴影 DOM 组件的属性。stylesheetsLightningElementstylesheets

例如，要将 和 样式表注入 ，请在 中配置 static 属性。header-styles.cssbutton-styles.cssmyComponentstylesheetsmyComponent.js

myComponent/
    ├── myComponent.js
    ├── myComponent.html
    ├── myComponent.css
    ├── header-styles.css
    └── button-styles.css
// myComponent.js
import { LightningElement } from 'lwc';
import headerStyles from './header-styles.css';
import buttonStyles from './button-styles.css';

export default Example class extends LightningElement {
    static stylesheets = [
        headerStyles,
        buttonStyles
    ];
}
LWC 引擎注入的第一个样式表是 ，因为它与组件的模板隐式关联。然后，引擎将按照数组中列出的顺序加载与该属性关联的所有样式表。根据 的此配置 ，按以下顺序加载其样式表：、 和 。myComponent.cssstylesheetsstylesheetsmyComponentmyComponent.cssheader-styles.cssbutton-styles.css

在组件类定义期间，LWC 引擎在应用程序的生存期内缓存数组。如果在评估组件代码后进行修改，则不会影响注入的样式表。stylesheetsstylesheets

子类组件不会自动从超类组件继承。如果要从超类组件扩展到子类组件，请使用手动将超类与子类组件的样式表合并。stylesheetsstylesheetssuper.stylesheetsstylesheets

import { LightningElement } from "lwc";
import superclassStylesheet from "./superclass.css";
import subclassStylesheet from "./subclass.css";

class Superclass extends LightningElement {
  static stylesheets = [superclassStylesheet];
}

class Subclass extends Superclass {
  static stylesheets = [...super.stylesheets, subclassStylesheet];
}

为组件创建样式挂钩

若要公开自定义组件的样式挂钩，请使用 CSS 自定义属性。CSS 自定义属性还使代码更易于阅读和更新。

将组件的样式钩子记录为组件 API 的一部分。要更改组件的样式，使用者只需设置样式钩子的值，他们不需要知道您如何实现样式。

使用公共属性设置 LWC 的样式

https://youtube.com/watch?v=ENRVbA3bqzY

要在组件的样式表中定义 CSS 自定义属性，请在该属性前面加上前缀。要插入该属性的值，请使用 .--var()

:host {
  --important-color: red;
}

.important {
  color: var(--important-color);
}

CSS 自定义属性从其父组件继承其值。继承的属性刺穿了影子 DOM。一些 CSS 属性（如颜色）也是继承的。由于 CSS 自定义属性是继承的，因此使用者可以在 DOM 树中的更高级别设置其值并设置组件的样式。

这些 CSS 自定义属性为两个主题创建样式挂钩：浅色和深色。将回退值作为可选的第二个参数传递给。var()

.light {
  background-color: var(--light-theme-background-color, lightcyan);
  color: var(--light-theme-text-color, darkblue);
}

.dark {
  background-color: var(--dark-theme-background-color, darkslategray);
  color: var(--dark-theme-text-color, ghostwhite);
}

在 lwc.dev 的 playgrounds 中试验此代码。

样式组件的反模式

以下是开发人员在设置 Lightning Web 组件样式时常犯的一些错误。这些技术不受支持，我们希望看到一些具体的例子对你有所帮助，这样你就可以避免它们。

最常见的反模式是根据 Lightning 基本组件的渲染标记设置样式，并直接覆盖 SLDS 类和样式。还应避免使用精确的类属性字符串匹配来查询元素。

反模式：设置基本组件的 HTML 样式

当你检查你的浏览器控制台并看到基本组件的渲染 HTML 时，很容易制作你的 CSS 来定位你看到的元素和类。但是，Salesforce 不支持基于呈现输出的样式。

Salesforce 需要灵活地重新设计组件的内部结构，以提高性能、增强功能并支持可访问性。因此，不能假定组件标记在版本上呈现相同的版本。如果基于这样的假设创建样式，则样式将来可能会中断。我们记录了对组件功能和行为的更改，但不记录对其内部的更改。

重要

不支持覆盖基本组件样式，除非使用记录的样式挂钩。

这是一个常见的错误，将 SLDS 类替换为您自己的类。

.myCustomClass .slds-class_name;

假设您的公司 Acme Widgets 在您的一个自定义组件中使用了基本组件。你用 Acme 自己的一个 SLDS 类替换一个 SLDS 类，因为它很方便，这是一个常见的错误。组件 CSS 以选择器为目标。lightning-combobox.slds-combobox__input

.acme-combobox_box .slds-combobox__input;

如果 Salesforce 更改为不再使用选择器，并且对 Acme 组件样式造成不利影响，则由您来修复组件的样式。lightning-combobox.slds-combobox__input

请参阅使用 Lightning Design System 设置组件样式，了解支持设置组件样式的方法。

反模式：覆盖 SLDS 类

获取 SLDS 选择器名称并稍作调整很简单，但不受支持。

覆盖 SLDS 选择器的属性时，将来对 SLDS 的更改可能会导致组件样式出现意外结果。Lightning Design System 不断改进，并将所有更改记录在 SLDS 发行说明中。

下面是一些不受支持的替代示例。

/* myButton.css */
/* Anti-pattern - Don't do this */
.slds-button_brand {
  background-color: purple;
}

/* Don’t do this */
.slds-button {
  padding: 16px;
}

/* Don’t do this */
.slds-scoped-notification {
  padding: var(--scoped-spacing);
}

请改用 Style Components with Lightning Design System 中讨论的技术。

反模式：具有精确属性字符串匹配的 querySelector

由于优化缩短了 Lightning Web 组件的渲染时间，静态节点的值和属性可能会使用额外的空格或意外字符进行渲染。更新使用类或样式属性的 JavaScript 代码，因为此更改可能会影响它们。styleclass

以前，您可以包含空格，以便通过使用精确的属性字符串匹配来使用元素的类名来查询元素。

/* Don’t do this */
document.querySelector('[class="highlight yellow"]');

该属性已呈现，如下所示。highlight yellow

<div class="highlight yellow">

但是，该属性现在可以使用额外的空格进行呈现。

<div class=" highlight yellow">

修改 JavaScript 代码以使用忽略空格的选择器。

/* Do this instead */
document.querySelector(".highlight.yellow");

反模式：依赖于生成的 CSS 范围令牌

为了在组件中限定 CSS 的范围，LWC 会自动向 DOM 元素添加属性和类。这些属性和类是内部实现细节，可以随时更改。

<c-cmp c-cmp_cmp-host>
  <span c-cmp_cmp></span>
</c-cmp>

虽然使用生成的类似于组件名称的 CSS 范围令牌很容易，但如果依赖于不拥有的组件的内部结构，则代码可能会中断。由于性能改进，LWC 为 Winter ’24 的 CSS 范围标记生成一个混淆字符串，格式为，其中是唯一的字母数字字符串。lwc-hashstringhashstring

<c-cmp lwc-2s44vctlls4-host>
  <span lwc-2s44vctlls4></span>
</c-cmp>

仅当升级到 LWC API 版本 59.0 时，为 CSS 范围令牌生成模糊处理字符串的更改才会影响您的自定义组件。但是，此更改会立即影响 Lightning Experience 和 Experience Builder 站点中 Salesforce 创作的组件，例如在记录页面或列表视图上呈现的组件，以及基本 Lightning 组件。

不要依赖代码中的内部属性和类，或使用进行测试，因为内部实现可能随时更改。除了使用，您还可以使用模板 refs （lwc：ref）。this.template.querySelector()this.template.querySelector()

使用通用 CSS 模块为 Lightning Web 组件创建一致的外观。在 CSS 模块中定义样式，并将该模块导入到要共享样式的组件中。

您可以导入一个或多个 CSS 模块。导入的样式规则将应用于模板，就像未导入的样式规则一样。Lightning Web 组件支持 CSS 级联算法。

/* myComponent.css */

/* Syntax */
@import "namespace/moduleName";

/* Example */
@import "c/cssLibrary";

/* Note: Lightning web components can access modules only from the c and lightning namespaces
under Lightning Locker. If Lightning Web Security is enabled, Lightning web components 
can access modules from other namespaces. */

有关的更多信息，请参阅 MDN Web 文档：@import。MDN 列出了两个语法语句：和 .LWC 不遵守 .@import@import {url}@import {url list-of-media-queries}{list-of-media-queries}

创建一个包含 CSS 文件和配置文件的 Lightning Web 组件。文件夹和文件名必须相同。这个组件是你的CSS模块。cssLibrary ├──cssLibrary.css └──cssLibrary.js-meta.xml
在 CSS 文件中定义样式规则。/* cssLibrary.css */ h1 { font-size: xx-large; }
配置文件只需要这些标记。 <?xml version="1.0" encoding="UTF-8" ?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>49.0</apiVersion> <isExposed>false</isExposed> </LightningComponentBundle>
在 Lightning Web 组件的 CSS 文件中，导入 CSS 模块。myComponent ├──myComponent.html ├──myComponent.js ├──myComponent.js-meta.xml └──myComponent.css/* myComponent.css */ @import "c/cssLibrary"; /* Define other style rules for myComponent here */
导入的样式规则将应用于模板，就像未导入的样式规则一样。所有样式规则级联。在模板中，标记中的文本使用中定义的样式。myComponent.html<h1>xx-largecssLibrary.css <template> <h1>Words to the Wise</h1> <p>An apple a day keeps the doctor away.</p> </template>

提示

您可以在 lwc.dev/guide/css 的游乐场玩代码

标签： CSS

Lightning CSS

使用 Lightning Design System 设置组件样式

使用基本 Lightning 组件

使用基本 Lightning 组件设计变体和实用程序类

使用样式挂钩覆盖默认样式

应用自定义 CSS类

从基础组件创建自定义组件

从 Lightning Design 系统蓝图创建自定义组件

使用基本 Lightning 组件设计变体

使用 Lightning Design System 样式钩子设置组件样式

组件级与全局颜色样式挂钩

组件级样式钩子示例

支持限制

从基本变化开始

创建样式主题和变体

实现组件

使用 Lightning Design System Design 令牌

使用自定义 Aura Token

为组件创建样式挂钩

样式组件的反模式

反模式：设置基本组件的 HTML 样式

反模式：覆盖 SLDS 类

反模式：具有精确属性字符串匹配的 querySelector

反模式：依赖于生成的 CSS 范围令牌

使用 Lightning Design System 设置组件样式

使用基本 Lightning 组件

使用基本 Lightning 组件设计变体和实用程序类

使用样式挂钩覆盖默认样式

应用自定义 CSS类

从基础组件创建自定义组件

从 Lightning Design 系统蓝图创建自定义组件

使用基本 Lightning 组件设计变体

使用 Lightning Design System 样式钩子设置组件样式

组件级与全局颜色样式挂钩

组件级样式钩子示例

支持限制

从基本变化开始

创建样式主题和变体

实现组件

使用 Lightning Design System Design 令牌

使用自定义 Aura Token

为组件创建样式挂钩

样式组件的反模式

反模式：设置基本组件的 HTML 样式

反模式：覆盖 SLDS 类

反模式：具有精确属性字符串匹配的 querySelector

反模式：依赖于生成的 CSS 范围令牌

共享 CSS 样式规则