如何制作类似 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 的 SvgIcon 中使用 SVG 文件
如何使 React Material-UI 中的 GridList 组件具有响应性