如何用Tailwind CSS自定义React Toastify进度条动画？

我通过以下代码自定义React-Toastify组件，整体样式符合预期，但需要定制默认显示为浅绿色的进度条动画部分，要求仅通过内联样式实现以支持动态主题切换，同时保留Tailwind CSS的使用：

const bgColor = 'bg-[#F6F4E8]';
const color = 'text-[#1D3124]';
const progressBarBgColor = '#07bc0c';
const borderBgColor = 'border-[#1C9099]';

return (
  <ToastContainer
    toastClassName={() =>
      classNames(
        'relative flex p-2 min-h-10 border rounded-md justify-between overflow-hidden cursor-pointer',
        bgColor,
        color,
        borderBgColor,
      )
    }
    position="top-right"
    autoClose={3000}
    icon={<Icon />}
    closeButton={(props) => <CloseButton closeToast={props.closeToast} />}
    progressStyle={{ background: progressBarBgColor }}
  />
);

解决方案 #

React-Toastify的进度条动画默认依赖内置的toastify-progress关键帧动画，你可以通过内联样式直接覆盖动画参数、外观属性，同时结合动态状态实现主题切换：

1. 扩展内联进度条样式
   在progressStyle中添加动画、尺寸、圆角等属性，确保动画时长与autoClose值匹配，避免进度条与toast关闭不同步。

2. 动态主题适配
   将颜色值转为可动态切换的状态/Props，配合内联样式实现主题切换时自动更新进度条样式。

修改后的完整代码示例

import { ToastContainer } from 'react-toastify';
import classNames from 'classnames';

// 假设你已导入Icon和CloseButton组件
const CustomToastContainer = ({ activeTheme }) => {
  // 根据当前主题动态生成样式值
  const themeConfig = {
    light: {
      bgColor: 'bg-[#F6F4E8]',
      textColor: 'text-[#1D3124]',
      borderColor: 'border-[#1C9099]',
      progressBarColor: '#07bc0c',
      progressHeight: '3px'
    },
    dark: {
      bgColor: 'bg-[#1D3124]',
      textColor: 'text-[#F6F4E8]',
      borderColor: 'border-[#07bc0c]',
      progressBarColor: '#1C9099',
      progressHeight: '4px'
    }
  };

  const { bgColor, textColor, borderColor, progressBarColor, progressHeight } = themeConfig[activeTheme];

  const toastClasses = classNames(
    'relative flex p-2 min-h-10 border rounded-md justify-between overflow-hidden cursor-pointer',
    bgColor,
    textColor,
    borderColor
  );

  // 内联进度条样式，支持动态修改
  const progressBarStyles = {
    background: progressBarColor,
    // 动画时长与autoClose保持一致（3000ms = 3s）
    animation: 'toastify-progress 3s linear forwards',
    height: progressHeight,
    borderRadius: '9999px',
    // 可选：自定义动画缓动函数、延迟等
    // animationTimingFunction: 'ease-in-out',
    // animationDelay: '0.2s'
  };

  return (
    <ToastContainer
      toastClassName={() => toastClasses}
      position="top-right"
      autoClose={3000}
      icon={<Icon />}
      closeButton={(props) => <CloseButton closeToast={props.closeToast} />}
      progressStyle={progressBarStyles}
    />
  );
};

export default CustomToastContainer;

关键说明 #

• 动画同步：animation属性的时长必须与autoClose的毫秒值对应（如3s对应3000），保证进度条动画结束时toast刚好关闭。
• 动态主题：通过activeTheme props切换主题配置，所有样式值会自动更新，包括进度条的颜色、高度等。
• Tailwind兼容：Toast主体样式仍使用Tailwind工具类，仅进度条的动态属性用内联样式实现，兼顾了Tailwind的便捷性和内联样式的动态性。

内容的提问来源于stack exchange，提问作者Aron