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

Posted

技术标签:

【中文标题】如何制作类似 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,但不能完全正确地使用上面的输入字段和标签。

以上是关于如何制作类似 Material UI 的 Gmail 任务工具栏的主要内容,如果未能解决你的问题,请参考以下文章

如何在故事书中显示 material-ui 主题对象

如何在 Material-UI 的 SvgIcon 中使用 SVG 文件

如何使 React Material-UI 中的 GridList 组件具有响应性

如何使用Material-UI创建此可滚动网格状视图?

如何将material-ui Snackbar实现为全局函数?

如何使用material-ui显示只读列表?