SLDS Styling Hooks — Component Level

我们来聊聊Salesforce组件样式里的一个特殊功能，就是组件样式挂钩，英文是Component Style Hooks，写法是以 --slds-c- 开头。 你可以把它想象成每个标准组件预留出来的调色板插口。它的作用就是让你可以很方便地修改组件的外观，比如按钮的颜色、背景等等，还不用担心把组件内部的结构弄乱。 不过有个前提要记住，这套挂钩只在SDDS 1样式体系下才能用。如果你用的是更新的样式版本，可能就用不了。 具体怎么用呢？很简单，你打开组件的CSS文件，然后针对 :host 这个选择器来设置这些变量。:host 就代表这个组件本身，比如你给一个按钮组件设样式，就可以这样写： :host { --slds-c-button-brand-color-background: var(--lwc-brandPrimary); --slds-c-button-brand-color-border: var(--lwc-brandPrimary); } 这里我们用到了全局的颜色挂钩，比如 --lwc-brandPrimary 这个变量，它里面存的就是你整套品牌色中的主色调。这样一设，按钮的背景色和边框色就都变成你的品牌颜色了，非常省事。 最重要的是，不要直接去覆盖SLDS的底层CSS类名，比如硬写成 .slds-button_brand 然后覆盖它的样式。那样做很危险，因为Salesforce更新样式库的时候，内部类名可能被修改，你的样式就会突然失效。用样式挂钩就安全多了，因为挂钩是Salesforce承诺维护的公开接口。 每个基础组件都或多或少公开了一些这样的自定义属性，具体有哪些你可以去查Lightning Design System网站上的组件蓝图页面，里面每个组件旁边都会列出可用的样式挂钩。 不过也要注意，并不是所有元素都支持这种自定义属性。目前有几个例外：Toast通知、工具提示、链接，还有表单元素是不支持的。也就是说，你没法用同样的方式去改这些组件的样式。另外，在事件通知方面，现在推荐用 lightning/toast 这个模块，而不是以前老的 platformShowToastEvents，这算是个关联的小提示。 好了，这就是组件样式挂钩的基本用法，记住它可以让你安全、规范地定制组件外观，用了它就不用担心升级问题，而且写法也很简单直观。