Repository navigation
v11 omit styling and avoid hydratation issue for SSR #1189
Description
I just upgraded to v11 and it broke my component. I was previously not using the styling at all (so not loading the CSS) and had written custom styles based on classNames I passed to control the UI. With v11, I believe this is broken because the styles are automatically injected into the code, with seemingly no option to opt out of that (I don't see anything in the docs). Is there a way to disable the default styling that comes with v11? I'm seeing styles added in the dev tools that were not there in the prior version.
Reacted by Savelii Lukash
Reacted by Savelii Lukash
Activity
reintroducing commentedon Dec 18, 2024
i actually just confirmed this is exactly the case by deleting the injected styles that get added to the DOM.
When i deleted that, my component worked as expected.
fkhadra commentedon Dec 19, 2024
Hey @reintroducing sorry for the trouble, wasn't expecting people to use the library without any style. I can add an export like
import {ToastContainer, toast } from "react-toastify/unstyled". Would that work for you?[-]v11 breaks styling[/-][+]v11 omit styling[/+]reintroducing commentedon Dec 19, 2024
@fkhadra no worries at all, yep that would be perfect, I wrap the library with my own component that conforms to my UI style guide so the import only happens in one place. Much appreciated.
fkhadra commentedon Dec 19, 2024
@reintroducing v11.0.2 should contains the new export. May I ask you to close the issue after confirming it work as expected on your side? Thank you
tats-u commentedon Dec 19, 2024
The current automatic style injection looks like incompatible with React Router v7 + Tailwind configuration causing hydration errors due to duplicated dangerouslySetInnerHtml in
<Links>.I'd like to import the style CSS manually instead of automatically injected.
fkhadra commentedon Dec 19, 2024
@tats-u could you share your setup on stackblitz? That would help me troubleshoot the issue
tats-u commentedon Dec 19, 2024
That error appear only in the F12 console, so I will reproproduce there in this weekend or next week.
fkhadra commentedon Dec 19, 2024
Ok thank you. For now you can import from
react-toastify/unstyledthis way you'll have to import the stylesheet manually in your app.tats-u commentedon Dec 19, 2024
Thank you for the information.
reintroducing commentedon Dec 19, 2024
@fkhadra confirmed this is working as expected with the new import. thank you very much for the quick turn around, much appreciated.
SaveliiLukash commentedon Jan 7, 2025
@fkhadra Thanks a ton for
react-toastify/unstyled! We were breaking our head after migration to v11 to keep our custom styling and then found this perfect solution.We use custom toast styling and different positioning of the same toast container based on media queries for different devices, which is cleanly achievable when styling from scratch, but is a pain when trying to override defaults.
Having an option and versatility to import css separately is always a huge plus for many reasons (our use case included).
P.S.: If it's possible, it would be great to have this
unstyledpart documented. Would have saved a lot of time for us and will save a lot of time for others.fkhadra commentedon Jan 7, 2025
Hey @SaveliiLukash sorry for the trouble 😞. I forgot to update the documentation after adding the
unstyledexport. I'll do it later today.damianobarbati commentedon Feb 19, 2025
hey @fkhadra, is the unstyled avaiable? I can't import it like this in v10.0.6:
SaveliiLukash commentedon Feb 19, 2025
@damianobarbati I believe v10 was unstyled by default.
Already without styles:
You had to import styles manually like this (which you can skip):
I guess there is no option to view the docs for older versions on the website, but you can find v10 docs in the Github repo.
[-]v11 omit styling[/-][+]v11 omit styling and avoid hydratation issue for SSR[/+]