-
-
Notifications
You must be signed in to change notification settings - Fork 673
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to style using Styled Components (Doc: https://fkhadra.github.io/react-toastify/how-to-style/#how-to-style-with-styled-components) #342
Comments
This seemed to do the trick:
|
The styled-component verify your children component that be wrapped to pass your classes. However as the child is a div that does not have the classes passed by the styled-component this warning occurs. |
Hey, Sorry for the late reply. Wanna make a PR to make the |
Yeah, I'll fork this project and send a PR with the modification asap. |
@JrFarias Hitting the same problem. Did you work on a fix for this? |
For those interested, you can work-around the warning mentioned in @ezeikel last comment by creating a wrapper component and applying the className to that instead: import React from 'react';
import styled from 'styled-components';
import { ToastContainer, ToastContainerProps } from 'react-toastify';
export const WrappedToastContainer = ({ className, ...rest }: ToastContainerProps & { className?: string }) => (
<div className={className}>
<ToastContainer {...rest} />
</div>
);
export default styled(WrappedToastContainer).attrs({
// custom props
})`
.Toastify__toast-container {}
.Toastify__toast {}
.Toastify__toast--error {}
.Toastify__toast--warning {}
.Toastify__toast--success {}
.Toastify__toast-body {}
.Toastify__progress-bar {}
`; |
It doesnt seem like this link works anymore? It just brings me to the demo page - I would expect that it should be a special page with code examples of how to style with styled-components? |
@AriHrannar can you try from a private tab ? I suspect a cache issue |
Awesome, thanks that did it :) |
If anyone else is having issues with this and is working with both typescript and styled-components, I found that I wasn't getting my styles passed through because I hadn't told typescript to expect a className on my components. Once I fixed that my custom styles started showing up. This is thestack over flow answer that made it clear to me what I was doing wrong - but @alextiley's example above also shows the proper way to handle this. It might help to have a note to this effect in the documentation. |
Are there any examples where
<ToastContainer />
can be styled usingstyled-components
?Currently doing this:
The text was updated successfully, but these errors were encountered: