如何复刻新版Gmail Tasks应用的Material UI风格工具栏？

嘿，刚好我之前折腾过类似的Gmail插件开发，针对你想要复刻新版Gmail Tasks的Material Design界面、用Material UI在工具栏首位添加选择组件的需求，给你梳理下具体的实现思路和代码方案！

一、核心思路：InboxSDK + Material UI的结合 #

要在Gmail工具栏首位加符合Material Design的选择组件，关键在于把Material UI的Select组件嵌入到InboxSDK注册的自定义工具栏容器中。InboxSDK允许我们扩展Gmail的工具栏区域，而Material UI的组件刚好能完美匹配Tasks的设计风格。

二、具体代码实现步骤 #

1. 初始化InboxSDK并注册自定义工具栏 #

首先确保你已经正确引入并加载InboxSDK，然后注册一个工具栏控件，重点是通过render方法把React组件挂载到工具栏容器里：

InboxSDK.load(2, '你的插件唯一ID').then(sdk => {
  // 注册工具栏控件，放在首位可以调整优先级（默认按注册顺序，提前注册即可占首位）
  sdk.Toolbars.registerToolbarButtonForApp({
    name: '任务列表选择器',
    // 可选：设置和Tasks风格一致的图标
    iconUrl: '你的任务图标路径',
    render: (container) => {
      // 将Material UI的选择组件挂载到工具栏容器
      ReactDOM.render(<TaskSelector />, container);
      // 组件卸载时清理，避免内存泄漏
      return () => ReactDOM.unmountComponentAtNode(container);
    }
  });
});

2. 构建匹配Tasks风格的Material UI Select组件 #

使用Material UI的Select组件，调整样式以贴合Gmail的工具栏风格，比如用outlined变体、匹配Gmail的主题色：

import { Select, MenuItem, FormControl, InputLabel } from '@material-ui/core';
import { makeStyles, useTheme } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(0.5),
    minWidth: 140,
    // 匹配Gmail工具栏的背景和边框
    backgroundColor: theme.palette.background.paper,
    borderRadius: '4px',
    boxShadow: 'none',
    // 适配Gmail的字体和高度
    '& .MuiOutlinedInput-root': {
      height: '32px',
      fontSize: '14px'
    }
  }
}));

function TaskSelector() {
  const theme = useTheme(); // 自动适配Gmail的明暗主题
  const classes = useStyles(theme);
  const [selectedList, setSelectedList] = React.useState('');

  const handleListChange = (event) => {
    setSelectedList(event.target.value);
    // 这里添加切换任务列表的业务逻辑，比如加载对应列表的任务数据
  };

  return (
    <FormControl variant="outlined" className={classes.formControl}>
      <InputLabel id="task-list-select-label">任务列表</InputLabel>
      <Select
        labelId="task-list-select-label"
        id="task-list-select"
        value={selectedList}
        onChange={handleListChange}
        label="任务列表"
      >
        <MenuItem value={'personal'}>个人任务</MenuItem>
        <MenuItem value={'work'}>工作任务</MenuItem>
        <MenuItem value={'shopping'}>购物清单</MenuItem>
      </Select>
    </FormControl>
  );
}

3. 适配Gmail的动态主题 #

Gmail支持明暗主题切换，Material UI的useTheme钩子可以自动获取当前主题，确保你的选择组件样式始终和Gmail界面保持一致，不需要额外手动调整颜色。

三、额外优化建议 #

• 布局对齐：如果想要和Keep工具栏的“图标+选择器”布局一致，可以在Select组件外层添加一个IconButton，用Grid组件实现图标和选择器的水平对齐，让整体更贴近Gmail原生控件的风格。
• 交互细节：复刻Tasks的菜单展开动画，Material UI的Select默认已经遵循Material Design规范，只需要确保菜单的弹出位置和工具栏衔接自然（可以通过MenuProps调整菜单的定位）。
• 性能优化：因为Gmail页面会动态更新，一定要在组件卸载时调用ReactDOM.unmountComponentAtNode清理组件，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Auguste Van Nieuwenhuyzen