本篇參考：
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中，所以使用需謹慎，盡快期待轉正吧。篇中有錯誤歡迎指出，有不懂歡迎留言。