使用@ericz1803/react-google-calendar时自定义Google日历tooltip不显示

问题排查与解决方案 #

• 检查依赖版本匹配度
  先确认项目中安装的@ericz1803/react-google-calendar版本和官方演示使用的版本一致，跨版本可能存在tooltip默认配置、依赖逻辑差异。可先卸载当前版本，安装与演示对齐的版本再测试。
• 补全缺失的样式依赖
  该组件的tooltip功能依赖@emotion/styled完成样式渲染，仅安装@emotion/react会导致tooltip无法正常生成。执行对应包管理命令补全依赖即可：

  # npm用户
  npm install @emotion/react @emotion/styled
  # yarn用户
  yarn add @emotion/react @emotion/styled
  # pnpm用户
  pnpm add @emotion/react @emotion/styled
  

• 排查全局样式冲突
  打开浏览器开发者工具，选中日历中的事件DOM节点，查看对应tooltip元素是否存在：
  • 如果元素存在但不可见，大概率是全局CSS把tooltip的z-index设置得过低被其他元素遮挡，或是全局伪元素规则（::after/::before）覆盖了tooltip的默认样式，可以给tooltip自定义更高的z-index解决。
  • 如果元素不存在，回到前两步排查依赖和版本问题。
• 修正代码不规范问题并显式开启tooltip
  你原有代码中把<body>标签放在了App组件的div内部，不符合HTML规范，可能导致组件全局事件绑定异常；同时可以给Calendar组件手动添加showTooltip={true}属性，避免部分版本默认配置关闭了tooltip功能，修改后的代码参考如下：

  import React from "react";
  import "./styles.css";
  import Calendar from "@ericz1803/react-google-calendar";
  import { css } from "@emotion/react";
  
  const API_KEY = "替换为你自己的API_KEY";
  
  let calendars = [
    { calendarId: "替换为你自己的日历ID" }
  ];
  
  let styles = {
    calendar: {
      borderWidth: "3px"
    },
    today: css`
      color: red;
      border: 1px solid red;
    `
  };
  
  export default function App() {
    return (
      <div className="App">
        <div
          style={{
            width: "90%",
            paddingTop: "50px",
            paddingBottom: "50px",
            margin: "auto",
            maxWidth: "1200px"
          }}
        >
          {/* 显式添加showTooltip属性，删除了多余的body标签 */}
          <Calendar 
            apiKey={API_KEY} 
            calendars={calendars} 
            styles={styles}
            showTooltip={true}
          />
        </div>
      </div>
    );
  }
  

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