你能让材料 ui 选项卡响应吗？答案

【问题标题】：can you make material ui tab responsive?你能让材料 ui 选项卡响应吗？
【发布时间】：2020-07-03 03:45:01
【问题描述】：

是否可以让material ui tab react组件响应式？

假设我有多个带有如下搜索栏的标签项

我想让输入组件为移动视图拉伸整个屏幕宽度（屏幕小于 500px）

我尝试将 width: 100% 放在带有媒体查询的选项卡上，但它不起作用。当我点击下图所示的搜索组件时，我还想移除焦点效果

总结

1 ) 我希望输入组件在较小的屏幕上拉伸整个宽度
2 ) 我想在点击第一个标签（搜索组件）时移除焦点效果

【问题讨论】：

【解决方案1】：

基本上我只针对小于 600 像素的屏幕尺寸进行了更改：

有一点，我使用 Material-UI 的默认断点，这里定义：https://material-ui.com/customization/breakpoints/

如果您想更改为 500px，只需定义您自己的断点即可。

【讨论】：

还有一个问题，当我尝试创建提交按钮时，我在控制台中收到警告说我不能在按钮内有按钮（因为我猜标签本身就是一个按钮）我将如何摆脱这条消息？
@SeoiMin 您可以使用Tab 中的component 属性将Tab 的组件更改为div，例如<Tab component="div" />。在该组件中，您可以使用另一个提交按钮。