Lightning Base Components — Styling Priority

同学们，我们来看一下怎么给基础组件做样式。在Lightning Web Components里，有三种方法，而且还分了优先顺序，用起来特别清晰。 首先，最优先的是用组件自带的变体属性，比如你看到 button 组件有 `variant` 属性，可以选品牌色 `brand`，中性色 `neutral`，还有破坏性的 `destructive` 这些。直接用属性来切换设计变体最安全、最省事。 第二优先级，是使用 SLDS 的工具类，这些类专门管间距啊、排版啊这类布局上的事情。你直接在组件上添加 `slds-m-top_medium` 这样的类名就行，不需要自己写 CSS，而且也不会干扰组件内部的样式。 第三个方法，是更深度定制会用到的样式挂钩。你可以通过 CSS 自定义属性，也就是 `--` 开头的变量，去调整组件的某些具体部分的样式。比如按钮的背景色挂钩可能叫 `--slds-c-button-color-background`，覆盖它就行。但是有一个铁律：永远不要直接覆盖 SLDS 自己的类名。要自定义，就自己创建一个 CSS 类，然后在这类里用样式挂钩。 在用自定义属性的时候，一定要提供后备值。写法就像这样：`var(--slds-g-spacing-4, var(--lwc-spacingMedium, 1rem))`。意思是先去读 `--slds-g-spacing-4`，如果它没定义，再去看 `--lwc-spacingMedium`，如果还没有，最后就用后面的 `1rem`。这样不管在什么环境里，都不会出现样式丢失。 再提醒一点：不要依赖基础组件内部的 DOM 结构，因为它随时可能被升级改掉。你要是靠着某个内部类名写样式，将来版本一更新可能就坏了。 最后，想要查每个组件到底提供了哪些样式挂钩，直接去“组件参考”文档里找，那里会列得清清楚楚。 掌握这三个方法，你就能安全又灵活地定制组件外观了，而且还不会因为未来更新而崩掉。