能否为Slate弹窗Toast组件添加自定义样式？

绝大多数内置Toast组件都会对外暴露固定的全局类名支持样式覆盖，你可以按以下步骤操作：

• 先通过浏览器开发者工具获取Toast的全局类名：触发一次Toast弹出，在元素审查面板定位到Toast对应的DOM根节点，即可看到节点绑定的类名，常见的默认类名包括.toast、.notification-toast、框架专属类名如.el-message（Element UI）、.ant-message（Ant Design）等
• 在项目全局CSS文件中编写覆盖样式，权重不足时可以叠加父级选择器或加!important提高优先级，参考示例如下：

/* 此处替换为你实际查到的Toast根节点类名 */
.custom-toast-root {
  /* 自定义字体 */
  font-family: "Source Sans Pro", system-ui, sans-serif !important;
  /* 自定义配色 */
  background: #2e2e2e !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  /* 自定义投影效果 */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
}

/* 替换默认图标 */
.custom-toast-root .toast-icon {
  /* 隐藏原有图标 */
  display: none !important;
}
.custom-toast-root::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  vertical-align: middle;
  /* 替换为自定义图标资源路径 */
  background: url("./custom-success-icon.png") no-repeat center / 100% 100%;
}

注意：如果Toast节点是动态插入到body根节点下的，不要在带scoped属性的局部样式文件中编写覆盖规则，局部样式无法匹配到根节点下的独立DOM；如果是低代码平台，需要将样式写入平台提供的「全局自定义CSS」配置入口才能生效。

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