Figma 嵌套组件样式不能继承的问题

遇到的问题

有时候我们会遇到嵌套在组件内部的组件样式不能继承的问题，比如在一个组件里，嵌套了一个图标组件，然而将图标改为另一个图标后，图标颜色并不能继承组件里设置好的颜色，而是显示成了图标的初始颜色或颜色发生错乱。

另一种情况是，在制作交互组件时，设计图中的变体实例，不能正确继承组件变体的样式。比如在设计图中是正常的，但切换到原型预览时，悬停、选中的样式会出现错误。

解决办法

Figma组件嵌套样式不能继承时，需要检查4个关键点：
1. 组件内嵌套元素的图层顺序是否一致
2. 组件内嵌套元素的图层数量是否一致
3. 组件内嵌套元素的图层命名是否一致
4. 实例中的嵌套元素的样式是否被覆盖过。
可能听起来有点绕，我们可以在一个例子中理解一下。

举个例子

这里我做了一个工具按钮，它的结构是一个 frame 套了一个图标组件。

所嵌套进去的这个系列的图标，都是由三个图层构成的。

所以我们可以在外层组件里控制每个Vector 层的颜色，比如在最上面一层设置为黑色，第二层为橙黄，第三层为橘红。