Ionic 4 - 如何更改 Toast 內按鈕的字體大小

Question

我正在用Ionic 4 + React 構建一個應用程序。

當用戶刪除元素時使用toast 組件以顯示“已成功刪除”消息，但在內部添加一個按鈕以提供撤消操作的可能性。

我需要更改該按鈕的字體大小，但幾乎所有 toast DOM 都在shadow-root內：

閱讀這樣的文章，我知道shadow-root中的所有內容都不能通過 css 選擇器設置樣式，必須使用 CSS4 Ionic 變量設置樣式。

但我找不到 css 變量來更改按鈕的字體大小，這就是 Ionic 所做的（不是變量）：

閱讀一些人說可以使用自定義 class，我已經嘗試過，但沒有任何運氣：

吐司成分：

<IonToast
  cssClass="e7-toast"
  isOpen={showToastDeshacer}
  color="dark"
  onDidDismiss={() => setShowToastDeshacer(false)}
  message="Deleted successfully"
  position="bottom"
  buttons={[
    {
      text: 'Undo',
      role: 'cancel',
      handler: () => {
        console.log('Undo clicked');
      }
    }
  ]}
/>

CSS：

.e7-toast .toast-button-inner {
  font-size: 44px!important;
}

任何對 Ionic 4 有更多經驗的人都知道更改該按鈕字體大小的方法嗎？

謝謝！

Answer 1

您可以使用::part更改影子 dom。 有文章供您參考： https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/