让我们来解析一下样式钩子背后的魔力

[sumonasumonakha.t]

再见，硬编码
借助样式钩子，定义和使用设计属性比以往更加简单且一致。获取定义和使用主要颜色 CSS 自定义属性的原始代码，并将其与样式钩子版本进行比较：

样式钩子代码示例的比较。
左侧是原始代码示例，我们定义并使用了 primary-color css 自定义属性。右侧的样式钩子定义和用法完全相同。使用样式钩子时，该实现不会发生变化。
这种方法和效果相同，但设计处理方式更流畅、更有条理。当使用样式钩子成为习惯后，设计更新就变得轻而易举了。

在应用程序级别，样式钩子会为您处理颜色分配，因此开发人员可以专注于有趣的事情。无需再手动调整每个元素。现在，您可以为按钮的背景颜色等设置应用正确的样式钩子，并且所有内容都会一次性更新。此外，如果您正在使用 Salesforce 的标准组件或设计系统蓝图，SLDS 类会自动应用正确的系统样式。


命名空间- 始终为“slds” - 告诉我们该钩子属于 Salesforce Lightning 设计系统。
范围，标记为“g”（代表全局），表示这些钩子可以影响整个应用程序。颜色和字体等类别有助于按视觉设计领域组织样式。
属性是指比例、系列或重量等特定样式方面，可帮助您微调排版。
角色和状态增加了精确度并指示了诸如强调色或禁用按钮等属性。
样式钩子的语法图。
样式钩子的语法和类别。
类别构成了样式钩子的基础，允许您使用预定义的比例来控制视觉设计元素，例 奥地利 whatsapp 数据 如颜色、字体、半径、阴影、间距和大小。这种标准化使设计更加一致且更易于实现。您无需为每个元素重新设计轮子，而是可以依靠这些经过验证的组件来保持整个应用的统一外观。

用于颜色、间距和半径的造型钩子。
样式钩子类别中的一些差异。
以下是一些样式钩子的示例：



现在我们已经掌握了语法，让我们来探索一个设计用例：为销售排行榜构建自定义 Salesforce 组件。

返回顶部

应用样式钩子
想象一下，您刚刚结束了一个销售业绩强劲的季度，您的团队对他们的成功感到很满意。为了保持活力，领导层决定在 Salesforce 应用中添加自定义排行榜组件，以推动一些友好的竞争。

挑战：排行榜需要动态、可主题化且在多种设备上保持一致，无缝集成到销售仪表板中。这时，样式钩子就可以派上用场了。

开始使用 Figma 进行设计
我们的设计师首先使用新的SLDS_V2 Figma 套件，这使得设计师和开发人员之间的协作变得轻而易举。借助预构建的组件和设计资产，设计师可以快速组装排行榜的基本布局。这些组件已经符合 Salesforce 的 SLDS 设计原则，从而节省了时间并确保了一致性。