本篇參考：
https://www.cnblogs.com/zero-zyq/p/14548676.html
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，中文翻譯過來更加的充滿迷惑。
上載檔案可以接受，但是丟棄檔案啥意思？？？解釋為拖動檔案以後測試說使用者肯定接受不了這個名字，修改一下這個名字應該很快的吧。
好吧，俗話說，解決不了問題就解決提問題的人。那我這小膽肯定就選擇了前者，因為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也罷，我們只需要找到“病因”，搞定他就好了，下圖是看到的層級結構。
我們發現，如果只是想要給或丟棄檔案給幹掉，只需要以下的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，上面描述可以構建你自己的樣式。
button demo如下：
lightningButtonHook.html
<template> <lightning-button variant="brand" label="Submit"></lightning-button> </template>
簡簡單單展示了一個button，後續對這個東西進行了增強，然後做一些整體的操作等等。效果如下：
當然我們永遠無法100%瞭解使用者的想法，所以舉個例子，使用者希望你預設展示是藍色，hover以後換個類似的顏色，這種需求來了以後，作為開發者的你怎麼做呢？
首先我們來看標準的 lightning-button加class等是否可以解決，發現是不支援的。
此時擺在你的面前的只有兩條路，要麼想著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; }
此時展示效果如下：
這種只改css的方式會讓人舒服很多了，不必 static resource或者換元件，何樂而不為呢？ 目前 styling hook不是所有的元件都支援，按照上圖所示，如果下面有 Styling Hook Overview的部分的元件，代表我們可以去自定製的。最最重要的一點：功能雖好，目前是beta版本，期待後續快快轉正吧。
總結：篇中主要針對 lightning-input type=file根據需求做了一個簡單的優化，以及引申出的lwc的一個針對元件css調整的功能，功能很強大，但是beta中，所以使用需謹慎，儘快期待轉正吧。篇中有錯誤歡迎指出，有不懂歡迎留言。