CODEWITHSUNDEEP
cssreactjsionic4
Jabel Márquez
Jabel Márquez

Reputation: 762

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

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:

enter image description here

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):

enter image description here

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!

Upvotes: 0

Views: 1524

Answers (1)

Wu Rick
Wu Rick

Reputation: 11

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/

Upvotes: 1

Related Questions