Aura框架中动态lightning:tab应用自定义CSS的解决方案问询

最优解决方案：动态绑定自定义CSS类 #

你当前使用固定nth-child匹配的方式不适合动态tab场景，改成给需要高亮禁用的tab动态绑定自定义类即可，不需要每次调整tab数量时修改CSS规则，具体实现如下：

1. 调整tab数据结构 #

给动态生成的tab数据源新增标识字段，比如isNeedHighlight，用于标记当前tab是否需要高亮禁用。

2. 组件中绑定动态类 #

在lightning:tab标签上通过表达式绑定类：

<aura:iteration items="{!v.tabList}" var="tabItem">
    <lightning:tab 
        class="{!tabItem.isNeedHighlight ? 'disabled-highlight-tab' : ''}"
        label="{!tabItem.label}"
        id="{!tabItem.id}"
    >
        <!-- tab内容区域 -->
    </lightning:tab>
</aura:iteration>

3. 简化CSS规则 #

只需要写一套针对自定义类的样式即可：

.THIS .disabled-highlight-tab {
    background-color: dodgerblue !important;
    color: white !important;
    height: 1.5rem;
    cursor: no-drop !important;
    pointer-events: none;
}

补充说明 #

• 样式不生效的核心原因通常是Aura组件的样式隔离机制，自定义类加上!important可以覆盖lightning原生组件的默认样式，上述写法已经适配了Aura的样式规则
• 后续新增/删除tab时，只需要在数据源层调整对应tab的isNeedHighlight字段值即可，不需要修改CSS代码，维护成本极低

内容的提问来源于stack exchange，提问作者sfdc dev