Overlapping theme property.

[kishieel]

Issue

Hi, I am wondering about possibility of theming colored toast with ThemeProvider from "styled-components". Due to exisiting theme property on ToastConteiner when I am trying to fetch some theme settings for toast I meet with theme from ToastContainer overlaps my theme property from ThemeProvider.

What I want?

I would like to be able to theme a colored toast with the styled-components theme provider. Below is a sandbox presenting my issue:

Demo

https://codesandbox.io/s/long-breeze-ukibc?file=/src/App.js

Setup

"react": "16.2.0",
"react-toastify": "8.1.0",
"styled-components": "5.3.3"

[kishieel]

Works like a charm #342

const WrappedToastContainer = (props) => {
    return (
        <div {...props}>
            <ToastContainer
                closeOnClick: true,
                pauseOnHover: true,
                theme: "colored"
            />
        </div>
    )
}

const ToastContainerStyled = styled(WrappedToastContainer)`
    .Toastify__toast-container {
        /* style for default container - in docs not wrapped inside any class */
    }

    .Toastify__toast-theme--colored.Toastify__toast--success {
        background: ${({theme}) => theme.backgroundToastSuccess};
    }

    .Toastify__toast-theme--colored.Toastify__toast--warning {
        background: ${({theme}) => theme.backgroundToastWarning};
    }

    /* etc. */
`;