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/