Allow more custom toast style customization

Description

It would be preferred to have a simple way to override the backgroundColor in containerStyle. If there is a way, I did not find it.

Problem Statement/Justification

The current colors based on status are rather imposing.

Proposed Solution or API

For example:

export const postChangedToast = (): UseToastOptions => ({
    title: "This post got updated",
    description: "Test description",
    duration: 5000,
    position: "top",
    containerStyle: {
        backgroundColor: "red"
    }
});

This still renders the default infobox, and just colors the background ‘behind’ the infobox.

Alternatives

I’ve tried the demos on the documentation page. Couldn’t manage to change the background color, although changing some other styles worked.

Additional Information

It seems that standard React styles are used, but I couldn’t manage to change the color of the toast box. Don’t really understand I couldn’t find another issue describing the same (maybe I didn’t look well enough), it’s the first thing I tried before adding it to my site.

[hrishikeshpaul]

Hey @kimgysen this is what I’ve done and it works fine,

components: {
        Alert: {
            variants: {
                toast: (P: any) => {
                    return {
                        container: {
                            ...P.theme.components.Alert.variants.solid(P).container,
                            bottom: '64px',
                        },
                    };
                },
            },
        },
    },

The offset in my case is from the bottom. Hope this helps.

[TimKolberger]

You can use the variant property in UseToastOptions to choose the Alert variant Chakra UI Docs | Toast | Variants Kindly see this CodeSandbox for an example.

Kindly close this issue if it solves you issue ✨