如何修改React Google Charts的默认错误提示样式？

你监听error事件后无法调整样式，是因为默认红色横幅是Google Charts内核直接渲染的DOM元素，优先级极高，需要先处理默认行为再做定制：

方案1：完全替换默认错误提示（可控性最高） #

首先在error回调中移除默认生成的错误元素，之后你可以自行控制错误提示的展示逻辑，修改后的事件监听代码如下：

{
  eventName: "error",
  callback({ chartWrapper }) {
    // 移除Google Charts自动生成的默认错误横幅
    const chartContainer = chartWrapper.getContainer();
    window.google.visualization.errors.removeAllErrors(chartContainer);
    
    // 此处编写你的自定义错误逻辑，比如更新组件state展示你自己的错误组件、弹出项目统一的Toast提示等
    console.log("图表加载出错", chartWrapper);
  }
}

方案2：直接覆盖默认错误的样式 #

如果你只想修改默认红色横幅的外观不需要替换逻辑，直接全局覆盖Google Charts内置的错误类样式即可，注意需要加!important覆盖默认的内联样式优先级：

/* 错误横幅外层容器 */
.google-visualization-errors-all-elements {
  /* 替换默认红色背景 */
  background: #fef0f0 !important;
  /* 替换默认边框 */
  border: 1px solid #fbc4c4 !important;
  /* 替换默认文字颜色 */
  color: #f56c6c !important;
  padding: 10px 15px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
}

/* 错误提示关闭按钮（按需修改） */
.google-visualization-errors-dismiss {
  color: #f56c6c !important;
}

如果你的项目使用了CSS Module、styled-components等带作用域隔离的样式方案，需要把上述样式写在全局样式文件中，避免作用域隔离导致类名不生效。

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