本篇参考:

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学习(三十四)  如何更改标准组件的相关属性信息-LMLPHP

上载文件可以接受,但是丢弃文件啥意思???解释为拖动文件以后测试说用户肯定接受不了这个名字,修改一下这个名字应该很快的吧。

好吧,俗话说,解决不了问题就解决提问题的人。那我这小胆肯定就选择了前者,因为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学习(三十四)  如何更改标准组件的相关属性信息-LMLPHP

 我们发现,如果只是想要给或丢弃文件给干掉,只需要以下的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学习(三十四)  如何更改标准组件的相关属性信息-LMLPHP

 button demo如下:

lightningButtonHook.html

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

简简单单展示了一个button,后续对这个东西进行了增强,然后做一些整体的操作等等。效果如下:

Salesforce LWC学习(三十四)  如何更改标准组件的相关属性信息-LMLPHP

当然我们永远无法100%了解用户的想法,所以举个例子,用户希望你默认展示是蓝色,hover以后换个类似的颜色,这种需求来了以后,作为开发者的你怎么做呢?

首先我们来看标准的 lightning-button加class等是否可以解决,发现是不支持的。

Salesforce LWC学习(三十四)  如何更改标准组件的相关属性信息-LMLPHP

 此时摆在你的面前的只有两条路,要么想着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学习(三十四)  如何更改标准组件的相关属性信息-LMLPHP

 这种只改css的方式会让人舒服很多了,不必 static resource或者换组件,何乐而不为呢? 目前 styling hook不是所有的组件都支持,按照上图所示,如果下面有 Styling Hook Overview的部分的组件,代表我们可以去自定制的。最最重要的一点:功能虽好,目前是beta版本,期待后续快快转正吧。

总结:篇中主要针对 lightning-input type=file根据需求做了一个简单的优化,以及引申出的lwc的一个针对组件css调整的功能,功能很强大,但是beta中,所以使用需谨慎,尽快期待转正吧。篇中有错误欢迎指出,有不懂欢迎留言。

06-11 07:14