如何使用React Toastify自定义提示框的图标及图标背景色

我在表单提交的onSubmit方法中，当请求响应成功时会渲染Toast提示框，但无法实现带图标、自定义布局的成功提示样式效果。现有代码如下：

const onSubmit: FormEventHandler<HTMLFormElement> = async (event: any) => {
    try {
      if (!organisationId) {
        throw Error('[userDetailsEdit] - organisationId is not present');
      }

      await handleSubmit(async (formData) => {
        await updateUserData({
          data: { ...formData, id: data.id },
          organisationId
        }).unwrap();
       onSuccess && onSuccess();
       toast.success("Invitation has been sent to the user's email updated", {
        position: 'bottom-right',
        autoClose: 5000,
        hideProgressBar: true,
        closeOnClick: true,
        pauseOnHover: true
      });
      })(event);
    } catch (error: any) {
      setTimeout(
        () =>
          setFormErrors({
            error,
            setError,
            fields: Object.keys(schema.fields)
          }),
        50
      );
    }
  };

解决方案 #

要实现自定义Toast效果，需要使用toast的自定义组件渲染能力，替换默认的toast.success()调用：

const onSubmit: FormEventHandler<HTMLFormElement> = async (event: any) => {
    try {
      if (!organisationId) {
        throw Error('[userDetailsEdit] - organisationId is not present');
      }

      await handleSubmit(async (formData) => {
        await updateUserData({
          data: { ...formData, id: data.id },
          organisationId
        }).unwrap();
       onSuccess && onSuccess();
       // 自定义Toast组件
       toast(<div style={{ 
         display: 'flex', 
         alignItems: 'center', 
         gap: '12px', 
         padding: '16px', 
         backgroundColor: '#ECFDF5', 
         border: '1px solid #A7F3D0', 
         borderRadius: '6px',
         boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
       }}>
         {/* 自定义成功图标 */}
         <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18Z" fill="#065F46" />
           <path d="M8.75 11.25L10 12.5L12.5 9.75" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
         {/* 提示文本 */}
         <span style={{ 
           color: '#065F46', 
           fontSize: '14px', 
           fontWeight: 500 
         }}>Invitation has been sent to the user's email updated</span>
       </div>, {
        position: 'bottom-right',
        autoClose: 5000,
        hideProgressBar: true,
        closeOnClick: true,
        pauseOnHover: true
      });
      })(event);
    } catch (error: any) {
      setTimeout(
        () =>
          setFormErrors({
            error,
            setError,
            fields: Object.keys(schema.fields)
          }),
        50
      );
    }
  };

说明 #

• 直接传入JSX组件给toast()方法，可完全控制Toast的布局、样式和内容
• 示例模拟了绿色主题+对勾图标的样式，你可以根据需求调整SVG图标、颜色、间距、阴影等细节
• 如果需要多次复用，建议把自定义Toast封装成独立组件（比如SuccessToast），调用时直接传入toast(<SuccessToast message="提示内容" />)即可

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