Amplify-js: How to customize the Authentication toast that shows at the top with error messages?

[ChakirMrabet]

* Which Category is your question related to? *

Authenticator Component.

* What AWS Services are you utilizing? *

Cognito.

* Provide additional details e.g. code snippets *

I can customize all the Authentication components (SignUp, ForgotPassword, etc..), except the Toast one that shows up at the top of the screen with error messages. I'd like to get rid of it and instead show my own component.

I tried using a theme to hide the NavBar that seems the Toast to be built with as follows, but doesn't seem to work:

const awsTheme = {
  navBar: { display: "none" },
};
....
<Authenticator theme={aswTheme} errorMessage={MyErrorHandler} ... />

How can I achieve this? I can't find anything in the documentation.

Thanks.

[BardiaN]

You need to customize the "toast" class in your theme:
{
...,
toast: {backgroundColor: 'red'},
... }

[ChakirMrabet]

You need to customize the "toast" class in your theme:
{
...,
toast: {backgroundColor: 'red'},
... }

That worked, thanks!

[brandondurham]

It’s unfortunate that the theming system here is so limiting. I can style some aspects of the toast errors, but not, for instance, the “x” button with pseudo elements.

[cnbrkkaya]

Hi,
Lets say we dont want to use that toast component. Instead i want to use something like react-notification-alert or any other thing. How can i achieve this ?
Thanks.