Coveo原子搜索界面样式-原子-图标-阴影Dom

Question

我试图使用Shadow来设计Coveo的新的原子反应包装器。它们似乎没有将原子图标的svg元素作为提交按钮和清除按钮的一部分。我可以通过改变一些变量来修改它们的颜色。

atomic-search-box::part(clear-button){ width: 50px; height: 50px; }

这将影响svg的背景，而不是图标本身。这里是呈现出来的透明按钮的html。

​

<button class="btn-text-transparent w-8 h-8 mr-1.5 text-neutral-dark ripple-parent ripple-relative" part="clear-button" aria-label="Clear"><atomic-icon class="w-3 h-3 hydrated ripple-relative" innerhtml="<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 18 18&quot;><path d=&quot;m18 2-1.8-2-7.1 7.1-7.1-7.1-2 2 7.1 7.1-7.1 7.1 2 1.8 7.1-6.9 7.1 6.9 1.8-1.8-6.9-7.1z&quot;></path></svg>"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="m18 2-1.8-2-7.1 7.1-7.1-7.1-2 2 7.1 7.1-7.1 7.1 2 1.8 7.1-6.9 7.1 6.9 1.8-1.8-6.9-7.1z"></path></svg></atomic-icon></button>

​

看起来高度和宽度是从原子图标上的.w-3 .h-3类中提取出来的。

.h-3 {
    height: 0.75rem;
}

我是否可以以某种方式覆盖这些类，或者如何增加这些元素的大小？

Answer 1

在您提出问题时，确实没有一种简单的方法来编辑这些组件。然而，在过去的几周内，清晰图标和提交图标阴影部分已经发布：https://docs.coveo.com/en/atomic/latest/reference/components/atomic-search-box/我希望这有帮助！