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

[ezeikel]

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

[ezeikel]

This seemed to do the trick:

const StyledToastContainer = styled(ToastContainer).attrs({
  className: 'toast-container',
  toastClassName: 'toast',
  bodyClassName: 'body',
  progressClassName: 'progress',
})`
  /* .toast-container */
  bottom: 0;
  left: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  .toast {
    background-color: var(--color-black);
    margin: 0;
    cursor: auto;
  }
  button[aria-label="close"] {
    display: none;
  }
  .toast {
    background-color: var(--color-black);
  }
  .body {
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: var(--default-font-family);
    margin: 0;
    display: grid;
    align-items: center;
  }
`;

[ezeikel]

Still getting this warning in the console though 🤔:

[JrFarias]

The styled-component verify your children component that be wrapped to pass your classes.

https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/utils/classNameUsageCheckInjector.js#L41

However as the child is a div that does not have the classes passed by the styled-component this warning occurs.
https://github.com/fkhadra/react-toastify/blob/master/src/components/ToastContainer.js#L422

[fkhadra]

Hey,

Sorry for the late reply. Wanna make a PR to make the ToastContainer work with styled-components ?

[JrFarias]

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

[sgoudie]

@JrFarias Hitting the same problem. Did you work on a fix for this?

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

[fkhadra]

https://fkhadra.github.io/react-toastify/how-to-style/#how-to-style-with-styled-components