Theme customization

Create a CSS class with the desired custom properties for your customized theme.

.custom-lilac {
  --confirm-toast-btn-close-color: crimson;
  --confirm-toast-text-color: #9e3ccf;
  --confirm-toast-btn-yes-color: green;
  --confirm-toast-btn-no-color: black;
}

Next, import the CSS file and apply the class name using the className property. Additionally, set the theme property as needed.

import { useState } from 'react'
import { ConfirmToast } from 'react-confirm-toast'
import './custom.css'

export default function ConfirmToastComposition() {
  const [show, setShow] = useState(false)

  function myFunction() {
    alert('Done!')
  }

  return (
    <>
      <button
        onClick={() => {
          setShow(true)
          console.log('Click')
        }}
      >
        Customized Lilac theme
      </button>
      <ConfirmToast
        className='custom-lilac'
        customFunction={myFunction}
        setShowConfirmToast={setShow}
        showConfirmToast={show}
        theme='lilac'
      />
    </>
  )
}