图标颜色不适用于 LWC 中的闪电选项卡

Question

.html

<lightning-tabset variant="vertical" >
        <lightning-tab class="class1" icon-name="utility:adduser" label="demo label1"> demo label1 </lightning-tab>
        <lightning-tab class="class2" icon-name="utility:adduser" label="demo label2"> demo label</lightning-tab>
<lightning-tabset/>

.css

.class1{
    --lwc-colorTextIconDefault: blue;
}
.class2{
    --lwc-colorTextIconDefault: red;
}

我尝试了与更改 lighting-icon 图标颜色相同的方法，但它不适用于 lightning-tab。

Answer 1

您可以在 js 中使用 renderedcallback 来更改 LWC 中 Lightning-tab 的图标颜色。

.html

 <lightning-tabset variant="vertical" class="tabsetCss" >
        <lightning-tab class="class1" icon-name="utility:adduser" label="demo label1" data-id= 'firstIcon'> demo label1 </lightning-tab>
        <lightning-tab class="class2" icon-name="utility:adduser" label="demo label2" data-id= 'secondIcon'> demo label</lightning-tab>
    </lightning-tabset>

.js

 renderedCallback(){
        let firstIcon  = this.template.querySelector(`[data-id='firstIcon']`);
        let firstIconId = firstIcon.getAttribute("aria-labelledby");
        const firstStyleCss = document.createElement('style');
        firstStyleCss.innerText = ` .tabsetCss #${firstIconId} .slds-icon-utility-adduser svg {
                                fill:blue !important;
                                }
                            `;
        if (this.template.querySelector('lightning-tabset') != null) {
            this.template.querySelector('lightning-tabset').appendChild(firstStyleCss);
        }


        let secondIcon  = this.template.querySelector(`[data-id='secondIcon']`);
        let secondIconId = secondIcon.getAttribute("aria-labelledby");
        const secondStyleCss = document.createElement('style');
        secondStyleCss.innerText = ` .tabsetCss #${secondIconId} .slds-icon-utility-adduser svg {
                                fill:red !important;
                                }
                            `;
        if (this.template.querySelector('lightning-tabset') != null) {
            this.template.querySelector('lightning-tabset').appendChild(secondStyleCss);
        }
    }

希望对您有所帮助。
谢谢

图标颜色不适用于 LWC 中的闪电选项卡

icon color not applying for lightning-tab in LWC

css

icons

lighting

salesforce

lwc