更改 Material UI 中 Tabs 指示器的位置

Question

我试图将指示器的位置设置为 TAB 的顶部而不是底部，如下所示：

我检查并尝试更新CSS，但没有成功。我是反应新手，所以无法自定义组件。

Answer 1

为了强化@Xavier的答案，我发现我们可以使用组件TabIndicatorProps的道具Tabs，如下所示。

<Tabs
   TabIndicatorProps={{
      sx: {          
         top: 0
      }
    }}
  >
  <Tab label="One" />
  <Tab label="Two" />
  <Tab label="Three" />
</Tabs>

Answer 2

2022年解决方案

\n

https://mui.com/styles/basics/

\n

\n

@mui/styles 是 MUI 的遗留样式解决方案。它依赖于 JSS 作为样式解决方案，@mui/material 中不再使用 JSS，在 v5 中已弃用。如果您不想在捆绑包中同时包含情感和 JSS，请参阅 @mui/system 文档，这是推荐的替代方案。

\n

\n

\n

\xe2\x9a\xa0\xef\xb8\x8f @mui/styles 与 React.StrictMode 或 React 18 不兼容。

\n

\n

您可以利用sx组件上的属性直接访问任何 css 类。

\n

https://mui.com/api/tabs/#css

\n

<Tabs\n  orientation="vertical"\n  value={value}\n  onChange={handleChange}\n  sx={{\n    \'.MuiTabs-indicator\': {\n      left: 0,\n    },\n  }}\n>\n  <Tab label="One" />\n  <Tab label="Two" />\n  <Tab label="Three" />\n</Tabs>\n

\n

Answer 3

我在codesandbox 中创建了一个示例并与您分享。

https://codesandbox.io/s/usage-p0y9t?file=/index.js

您可以将属性类传递给选项卡以覆盖内部类。在这种情况下，您可以将一个新类传递给指示器并覆盖他的样式。看看下面的链接

https://material-ui.com/api/tabs/#css