Style Components with Custom Aura Design Tokens

DEX602 - Unit 2 Introducing Lightning Web Components

📄 第 83 页 🎬 视频课程

课程章节介绍

同学们,今天我们来聊聊如何在Salesforce中使用自定义的Aura设计代币来美化我们的组件。首先,想象一下,你有一堆组件,它们都需要使用相同的颜色、字体或者边距。如果每个组件都单独设置这些样式,那工作量可就大了。所以,我们有一个聪明的办法,就是使用自定义的Aura设计代币。 从2020年春季开始,Salesforce就推出了这个功能。使用自定义代币其实很简单。首先,你需要在开发者控制台中创建一个名为`defaultTokens.token`的文件。这个文件就像是你的样式库,里面定义了所有你想要共享的样式属性。 创建好之后,你就可以在你的CSS文件中引用这些代币了。引用的方式也很简单,只需要以`--c-`开头,后面跟上你在`defaultTokens.token`中定义的属性名就可以了。比如,如果你定义了一个颜色代币叫做`primaryColor`,那么在CSS中你就可以这样写:`color: var(--c-primaryColor);`。 另外,如果你不想自己定义这些代币,Salesforce还提供了一个叫做Lightning Design System的工具,里面有很多预设的代币可以直接使用。你只需要访问https://www.lightningdesignsystem.com/design-tokens/,找到你需要的代币,然后在你的CSS中引用就可以了。比如,如果你想使用一个高亮背景色,你可以这样写:`background: var(--lwc-colorBackgroundHighlight);`。 总之,使用自定义的Aura设计代币,可以让你的组件样式更加统一,管理起来也更加方便。希望这个小技巧能帮助到你们!