如何在JS文件内为Toastify设置独立Toast样式（无需Styled ToastContainer）

你遇到的核心问题是：React Toastify的className属性仅接受字符串类名，无法直接传入样式对象。要在JS文件内实现单个Toast的独立样式，有以下几种可行方案：

方案1：使用Toastify内置的style配置项（最简单） #

Toastify的toast()方法支持直接传入style配置项，用于设置Toast的内联样式，这是官方推荐的JS内写样式的方式。

修改你的代码如下：

const notify = () => {
  toast(customMsg, {
    // 直接使用style配置项替代className
    style: {
      backgroundColor: 'yellow',
      color: 'black',
      borderRadius: '10px',
      border: '2px solid orange',
      width: '200px'
    },
    autoClose: false,
    closeOnClick: false,
    position: toast.POSITION.BOTTOM_RIGHT,
  });
};

如果默认样式优先级过高，需要强制覆盖，可以用style结合CSSStyleDeclaration.setProperty来添加!important：

const notify = () => {
  toast(customMsg, {
    style: {
      get backgroundColor() {
        const style = document.createElement('div').style;
        style.setProperty('background-color', 'yellow', 'important');
        return style.backgroundColor;
      },
      color: 'black',
      borderRadius: '10px',
      border: '2px solid orange',
      width: '200px'
    },
    // 其他配置...
  });
};

方案2：动态生成类名与样式表（适合复杂样式） #

如果需要更复杂的样式（比如伪元素、媒体查询），可以在JS内动态创建样式表，生成唯一类名后传给Toast的className。

示例代码：

// 生成唯一类名的工具函数
const generateUniqueClassName = () => `toast-custom-${Math.random().toString(36).slice(2, 10)}`;

// 动态创建样式并插入到DOM
const createToastStyle = (className, styles) => {
  const styleSheet = document.createElement('style');
  styleSheet.textContent = `
    .${className} {
      ${Object.entries(styles).map(([prop, value]) => 
        `${prop.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value};`
      ).join('')}
    }
  `;
  document.head.appendChild(styleSheet);
  return className;
};

// 使用示例
const notify = () => {
  const customClass = createToastStyle(generateUniqueClassName(), {
    backgroundColor: 'yellow !important',
    color: 'black !important',
    borderRadius: '10px',
    border: '2px solid orange',
    width: '200px'
  });

  toast(customMsg, {
    className: customClass,
    autoClose: false,
    closeOnClick: false,
    position: toast.POSITION.BOTTOM_RIGHT,
  });
};

方案3：用Styled Components包装Toast内容（适合React生态项目） #

如果你的项目已经使用了styled-components，可以直接创建一个自定义样式的组件，通过Toast的render方法渲染：

import styled from 'styled-components';

const StyledToastContent = styled.div`
  background-color: yellow !important;
  color: black !important;
  border-radius: 10px;
  border: 2px solid orange;
  width: 200px;
`;

const notify = () => {
  toast(() => <StyledToastContent>{customMsg}</StyledToastContent>, {
    autoClose: false,
    closeOnClick: false,
    position: toast.POSITION.BOTTOM_RIGHT,
  });
};

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