【问题标题】：Change the position of Tabs' indicator in Material UI在 Material UI 中更改 Tabs 指示器的位置
【发布时间】：2020-05-04 08:17:48
【问题描述】：

我正在尝试将指示器的位置设置为 TAB 的顶部而不是底部，例如：

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

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

我在代码沙盒中创建了一个示例并与您分享。

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

您可以将属性类传递给 Tabs 以覆盖内部类。在这种情况下，您可以将新类传递给指标并覆盖其样式。看看下面的链接

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

【讨论】：

非常感谢，我从您的示例中获得了 IDEA，并使用了 material-ui.com/styles/basics/#higher-order-component-api 中的示例。它解决了我的问题。
感谢@Macro Moretti。它真的帮助我解决我的问题。我正在研究垂直标签。在这种情况下，我必须重写指标类并将 0px 放在其左侧而不是顶部。

【解决方案2】：

2022 解决方案

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

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

⚠️ @mui/styles 与 React.StrictMode 或 React 18 不兼容。

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

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

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

【讨论】：

【解决方案3】：

为了强化@Xavier 的回答，我发现我们可以使用TabIndicatorProps 属性作为Tabs 组件，如下所示。

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

【讨论】：