如何制作类似 Material UI 的 Gmail 任务工具栏

Posted 2023-02-22

【中文标题】如何制作类似 Material UI 的 Gmail 任务工具栏

【英文标题】：How To make similar Material UI Gmail Tasks Toolbar

【发布时间】：2019-06-23 21:16:35

【问题描述】：

您好，我想知道如何复制与新的 Gmail 任务应用类似的风格。新的 Gmail 用户界面基于 Material Design。

由于我正在使用 React 和 InboxSDK 制作 Gmail 插件，因此我想复制外观。我目前正在使用这个 Material UI 组件库：https://material-ui.com/demos/app-bar/

我假设它是通过将select 作为工具栏中的第一个组件来完成的：https://material-ui.com/demos/selects/

Gmail App "Keep" Toolbar screenshot

【参考方案1】：

不太确定您要的是什么，但如果只是制作屏幕截图所需的 CSS，那么也许这会有所帮助：

https://stackblitz.com/edit/react-wuas6p

我正在使用 CSS 库 styled-components，以防您不想在 CSS 中处理 Material-UI 的 javascript。

【讨论】：

太好了，谢谢！我可以使用它。我玩过 React 的 Material UI，但不能完全正确地使用上面的输入字段和标签。