React Material 选项卡方向在响应式中发生变化？

Question

如何更改 React Material 选项卡方向以响应方式更改？我正在使用 React Material 版本 4

我需要

orientation="horizontal"

在桌面上响应，它应该是

orientation="vertical"

我的代码：-

<Tabs
                    orientation="vertical" // this need to change in responsive
                    onChange={handleTabsChange}
                    scrollButtons="auto" 
                    value={currentTab}
                    variant="scrollable"
                    className={classes.profileTabs}
                  >

感谢您的努力！

Answer 1

我能够利用 useMediaQuery 和 useTheme 挂钩让我的 Tab 组件根据屏幕尺寸更改其方向值，如下所示：

import { useMediaQuery } from '@mui/material';

import { useTheme } from '@mui/material/styles';

在我的组件内部但在渲染/返回之前

然后在我的Tabs组件里面的orientation属性

唯一需要注意的是，您需要更改保存选项卡及其面板的盒子/容器的弯曲方向。

默认情况下，弹性框设置为行，因此为了使面板在新水平放置的选项卡下呈现，您需要将弹性方向更新为列

希望这有帮助。

Answer 2

您可以使用 react-responsive 来使用

useMediaQuery

钩子，并根据屏幕宽度有条件地渲染水平或垂直方向。

// or whatever breakpoint you want to set
const smallScreen = useMediaQuery("(max-width: 768px)");

return(
<Tabs
   orientation={smallScreen ? "vertical" : "horizonal"} 
   onChange={handleTabsChange}
   scrollButtons="auto" 
   value={currentTab}
   variant="scrollable"
   className={classes.profileTabs}
>
)