The way to customize ToastContainer via @emotion/styled

[aopanasenko]

Hey all.

I have a problem in my project with customize ToastContainer via styled from @emotion/styled. Here is an example:

import styled from '@emotion/styled';
import { ToastContainer } from 'react-toastify';

export const ToastContainerStyled = styled(ToastContainer)`
  // Extend styles here
`;

and usage of styled component:

import React from 'react';
import { ToastContainerStyled } from './styled';

export const PlatformNotificationToastContainer = () => {
  return (
    <ToastContainerStyled
      position="bottom-left"
      theme="dark"
      limit={3}
      stacked
    />
  );
};

At this point when i trigger toast() function toast component have default light theme istead of dark. But after switching to styled-components everything works as it should. Does react-toastify has support of @emotion/styled or i should use only styled-components for css-in-js customization?

Dependencies:
"react-dom": "18.3.1",
"react": "18.3.1",
"@rsbuild/core": "1.0.9",
"react-toastify": "10.0.5",
"@emotion/css": "^11.13.5",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@swc/plugin-emotion": "4.0.3"

[fkhadra]

Hey @aopanasenko, I'm wondering if both styled-components and @emotion/styled inject their stylesheet in the same way. That would be the first thing I'd check.