Salesforce LWC學習(三十四) 如何更改標準元件的相關屬性資訊

zero.zhang 發表於 2021-06-10

本篇參考:

https://www.cnblogs.com/zero-zyq/p/14548676.html

https://www.lightningdesignsystem.com/platforms/lightning/styling-hooks/#Styling-Hooks-What-Does-It-Look-Like

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/create_components_css_custom_properties

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

最近遇見了一個有點煩的事情。描述如下:

需求為對excel進行解析,解析以後的結果進行validation以後儲存到資料庫。需求相對清晰,而且做過類似的demo,所以做起來很快。當然,如果一切順利可能也就不會有這篇部落格,問題就出現在了 lightning-input type=file的展示名稱上面,英文的名字是 Upload Files Or drop Files,中文翻譯過來更加的充滿迷惑。

Salesforce LWC學習(三十四)  如何更改標準元件的相關屬性資訊

上載檔案可以接受,但是丟棄檔案啥意思???解釋為拖動檔案以後測試說使用者肯定接受不了這個名字,修改一下這個名字應該很快的吧。

好吧,俗話說,解決不了問題就解決提問題的人。那我這小膽肯定就選擇了前者,因為lightning-input type=file肯定不能修改這個名字,所以怎麼半?換方案,變成<input type=file/>然後搞定他就好了,UI很好調,複製貼上LDS關於File的UI就可以嘍,此處可以參考:https://www.lightningdesignsystem.com/components/file-selector/#site-main-content , 改吧改吧UI,收工。

結果我高興了沒多久,測試人員提了一個問題,你這個元件名稱OK了的,但是我重複上傳一個檔案,只是改了檔案裡面的內容,他怎麼不識別呢?只是第一次有效果,我趕緊查了一下百度,確實是因為前端知識不精通,比較欠缺,所以出現了這種錯誤,因為 input type=file像是一個bug,針對 onchange方法,如果不改變檔名稱或者檔案內容,他不認為是變化,好傢伙,網上一堆的解決方案,js操作先刪除element再dom中新增element,做了一會發現還是有點麻煩,重新的用回了 lightning-input type=file,並且研究一下如何去搞定。

一. 如何去覆蓋標準的元件渲染出來的UI

我們先分析 lightning-input type=file更新以後的層級結構,通過F12檢視元素構成也好,通過上面的 lightning design system看 File Selector也罷,我們只需要找到“病因”,搞定他就好了,下圖是看到的層級結構。

Salesforce LWC學習(三十四)  如何更改標準元件的相關屬性資訊

 我們發現,如果只是想要給或丟棄檔案給幹掉,只需要以下的css作用一下,理論上就是可以搞定的。

.slds-file-selector__dropzone .slds-file-selector__text{
    display: none !important;
}

那麼問題又來了:strict CSS isolation enforced by LWC(LWC強制的嚴格CSS隔離)lwc封裝好的元件並不能直接去在這個元件的css裡面寫上就渲染了,因為他是解析以後才變成了這種效果,因為LWC嚴格的CSS隔離,我們不能將這個寫在當前LWC裡面,兩條路可以走:

1. 通過aura的<aura:html tag="style">覆蓋: 很幸運地是我這個模組是需要放在 tab的,我新建了一個 lightning component的tab,這樣的話,需要使用一層aura,aura裡面包了一個lwc,所以針對這個需求,只需要通過aura的手段去搞定即可。

<aura:component implements="force:appHostable">
    <aura:html tag="style">
        .slds-file-selector__dropzone .slds-file-selector__text{
            display: none !important;
        }
        </aura:html>
    <c:yourLwcComponent/>
</aura:component>

2. 上傳到static resource,強制覆蓋:針對上面的只能說比較巧合,我恰巧lwc上面包了一層aura,但是如果lwc->lwc的專案,怎麼去處理呢?一個workaround的方案就是將這個css上傳到static resource去,然後這個lwc component引入這個static resource,強制覆蓋就好了~~~這裡不再演示,前面有 如何去引入static resource的部落格。

二. Styling Hook簡單介紹

這個demo做完以後引入了我自己的一點小思考:我們作為開發者來說,開發的時候想的肯定是越穩定越好,所以好多都使用了標準的元件去實現,但是客戶的需求確實千變萬化的,比如使用lightning-button去實現,使用者讓微調一下樣式,微調一下字型,使用者眼中的微調,可能要我們去改變了這個實裝方式,因為好多標準確實很好用,但是可以自定義的地方太少,所以後續會導致使用者或者BA認為的一個小小的需求,開發起來就需要傷筋動骨,這也絕對不是一個前端設計框架的初衷。所以做完了這個demo以後,我去查了一下官方的lightning design system以及LWC的開發文件,去找一找有沒有哪些workaround方案或者平臺不斷去增強的功能,然後發現了 sytling hook。什麼含義?怎麼用呢?我們以 lightning-button作為一個簡單的舉例。

這個連結是LDS關於button的細節描述,https://www.lightningdesignsystem.com/components/buttons/#site-main-content

如果經常關注LDS的小夥伴可能看到了文件中增加了一部分內容:Styling Hooks Overview,上面描述可以構建你自己的樣式。

Salesforce LWC學習(三十四)  如何更改標準元件的相關屬性資訊

 button demo如下:

lightningButtonHook.html

<template>
    <lightning-button variant="brand" label="Submit"></lightning-button>
</template>

簡簡單單展示了一個button,後續對這個東西進行了增強,然後做一些整體的操作等等。效果如下:

Salesforce LWC學習(三十四)  如何更改標準元件的相關屬性資訊

當然我們永遠無法100%瞭解使用者的想法,所以舉個例子,使用者希望你預設展示是藍色,hover以後換個類似的顏色,這種需求來了以後,作為開發者的你怎麼做呢?

首先我們來看標準的 lightning-button加class等是否可以解決,發現是不支援的。

Salesforce LWC學習(三十四)  如何更改標準元件的相關屬性資訊

 此時擺在你的面前的只有兩條路,要麼想著css解決,然後上傳到static resource去渲染,要麼棄用 lightning-button,改成 button等來實現,BA他們可能也不開心,不就讓你改一個顏色嗎? 我記得之前做java什麼的專案幾分鐘就能搞定了,為什麼你估時間需要半天? 都很冤~~~啊哈~~~

那麼我們這種case就可以考慮使用 style hook解決了。

追加一下 lightningButtonHook.css

:host {
  --sds-c-button-brand-color-background:     blue;
  --sds-c-button-brand-color-border:     blue;
  --sds-c-button-shadow-focus : 0 0 3px #0176d3;
}

此時展示效果如下:

Salesforce LWC學習(三十四)  如何更改標準元件的相關屬性資訊

 這種只改css的方式會讓人舒服很多了,不必 static resource或者換元件,何樂而不為呢? 目前 styling hook不是所有的元件都支援,按照上圖所示,如果下面有 Styling Hook Overview的部分的元件,代表我們可以去自定製的。最最重要的一點:功能雖好,目前是beta版本,期待後續快快轉正吧。

總結:篇中主要針對 lightning-input type=file根據需求做了一個簡單的優化,以及引申出的lwc的一個針對元件css調整的功能,功能很強大,但是beta中,所以使用需謹慎,儘快期待轉正吧。篇中有錯誤歡迎指出,有不懂歡迎留言。

相關文章