Ionic 4 - 如何更改 Toast 内按钮的字体大小答案

【问题标题】：Ionic 4 - How to change font-size of button inside a ToastIonic 4 - 如何更改 Toast 内按钮的字体大小
【发布时间】：2020-05-13 22:43:44
【问题描述】：

我正在使用 Ionic 4 + React 构建应用。

在用户删除元素时使用 toast 组件 以显示“已成功删除”的消息，但在内部添加按钮以提供撤消操作的可能性。

我需要更改该按钮的字体大小，但几乎所有 toast DOM 都在 shadow-root 内：

阅读文章like this，我了解shadow-root 中的所有内容都无法通过css 选择器设置样式，必须使用CSS4 Ionic 变量设置样式。

但是我找不到一个 css 变量来改变按钮的字体大小，这就是 Ionic 所做的（不是变量）：

读过一些人说可以使用自定义类，我已经尝试过了，但没有任何运气：

Toast 组件：

<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 有更多经验的人都知道如何更改该按钮的字体大小？

谢谢！

【问题讨论】：

我认为你需要从 global.scss ， ion-toast div.toast-wrapper div.toast-button-group button.toast-button { font-size: 18px } ，试试看以这种方式。
@MostafaHarb 我没有使用 sass（默认情况下，cli 不会创建任何 sass），global.scss（或 css）应该放在哪里？我找不到有关此的文档，感谢您的帮助

标签： css reactjs ionic4

【解决方案1】：

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

【讨论】：