Ionic 4 - How to change font-size of button inside a Toast

Question

I'm building an app with Ionic 4 + React.

Using a toast component when the user delete an element to show the message "deleted successfully", but adding a button inside to give the possibility to undo the action.

I need to change the font-size of that button, but almost all the toast DOM is inside a shadow-root :

Reading articles like this , I understand that everything inside shadow-root it can't be styled by css selectors and must be styled using CSS4 Ionic variables.

But I can't find a css variable to change de font-size of the button, this is what Ionic does (not with variables):

Read some people that said that could work with a custom class, I already tried that but without any luck:

Toast component:

<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;
}

Anyone with more experience in Ionic 4 knows a way to change the font-size of that button?

Thanks!

Answer 1

you can change the shadow dom by using ::part . There is the article for your reference: https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/