How to style using Styled Components (Doc: https://fkhadra.github.io/react-toastify/how-to-style/#how-to-style-with-styled-components)

Are there any examples where <ToastContainer /> can be styled using styled-components?

Currently doing this:

const ReactToastAdapter = ({ className, bodyClassName, progressClassName, ...props }) => {
  return  (
    <ToastContainer
      className={className}
      bodyClassName={bodyClassName}
      progressClassName={progressClassName}
      {...props}
    />
  )
};

const StyledToastContainer = styled(ReactToastAdapter).attrs({
  bodyClassName: 'body',
  progressClassName: 'progress',
})`
  /* .Toastify__toast-container */
  bottom: 0;
  left: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  .Toastify__close-button {
    display: none;
  }
  .Toastify__toast {
    background-color: var(--color-black);
    margin: 0;
    cursor: auto;
  }
  .toast {
    background-color: var(--color-black);
  }
  .body {
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: var(--default-font-family);
  }
`;

[alextiley]

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 {}
`;

[JrFarias]

Yeah, I’ll fork this project and send a PR with the modification asap.