Coveo 原子搜索界面樣式 - Atomic-Icon - Shadow Dom

Question

我正在嘗試使用 Shadow Dom 設計 Coveo 的新 Atomic React Wrapper。 他們似乎沒有將 atomic-icon 的 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

在您提出問題時，確實沒有簡單的方法來編輯這些組件。 但是，在過去幾周內，clear-icon 和 submit-icon 陰影部分已經發布： https ://docs.coveo.com/en/atomic/latest/reference/components/atomic-search-box/ 我希望這個有幫助！