一 说明
应项目要求,调整ant design tour 弹窗边框的样式。tour 原本样式是有遮罩层,因此没有边框看起来也不突兀。原图如下:
但是UI设计是取消遮罩层,并设置边框样式。当 取消 了遮罩层,没有设置边框样式的图片如下:
由上可以看出,不设置边框的tour似乎跟网页页面融合了在一起。因此,就需要设置边框。 设置后的效果如下:
二 实现方式
最初我试着直接去修改ant design的内部css样式,修改 .ant-tour 的css 样式,但是始终不生效。于是,在反复观看官方文档,发现有一个全局token可以用来设置边框样式,那就是:
因此,设置代码如下:
<ConfigProvider
theme={{
token: {
boxShadowTertiary: " 0px 4px 16px 0px red"
},
}}
>
<Tour open={true} mask={false} steps={step}/>
</ConfigProvider>