如何设置 Material-UI Tabs 组件的高度？答案

【问题标题】：How can I set height of Material-UI Tabs component?如何设置 Material-UI Tabs 组件的高度？
【发布时间】：2017-02-08 04:13:45
【问题描述】：

我正在尝试将Material-UI Tabs component 的高度设置为 32 像素。我知道这不是一个很好的用户体验创意，但是，我已经解释过了，客户仍然想要它。

我尝试设置选项卡组件本身的高度。然后在里面的 Tab 组件上。后者将高度固定为 32px，但标签太低了，因为有一个内部 div（仍然）设置为 48px。

source 中的行似乎是：

height: (props.label && props.icon) ? 72 : 48,

我不知道如何使用通过 Material-UI 公开的样式和主题来覆盖该内部 div。

【问题讨论】：

完全是轶事，但 material-ui 很难自定义 - 根据来源，它们似乎不允许您使用 props 覆盖高度，这很常见。我什至看到某些组件用简单的<div>s 包裹，根本无法改变其内部内容。好跛脚。在某些情况下，我只是退回到使用纯 CSS：materializecss.com/tabs.html
确实如此。我四处寻找移动 UI 选项，但找不到任何似乎没有问题的东西。索环看起来很有希望，但 MUI 有更多的 SO 流量，所以我为此大吃一惊。当他们完成 React 的工作时，认为 Kendo 可能值得一看。
很高兴看到这不仅仅是我......
你可以这样试试。 <Tabs tabItemContainerStyle={{height:50 }}> <Tab buttonStyle={{height:50}} /> </Tabs>

标签： reactjs material-ui

【解决方案1】：

const tabHeight = '24px' // default: '48px'
const useStyles = makeStyles(theme => ({
  tabsRoot: {
    minHeight: tabHeight,
    height: tabHeight
  },
  tabRoot: {
    minHeight: tabHeight,
    height: tabHeight

  }
}));

<Tabs
  classes={{
    root: classes.tabsRoot,
  }}>
 <Tab
   classes={{
     root: classes.tabRoot
   }} />
 <Tab
   classes={{
     root: classes.tabRoot
    }} />
 <Tab
   classes={{
     root: classes.tabRoot
    }} />
</Tabs

基于“自定义组件”选项 1 的技术：Overriding styles with classes

【讨论】：

【解决方案2】：

我像这样添加了内联样式组件：

<Tabs
  style={{height: "32px"}}
>

这对我有用，希望对你也有用

来源： https://material-ui.com/customization/overrides/

【讨论】：

【解决方案3】：

如果您需要它在全球范围内应用。您可以添加到主题提供程序作为覆盖。

请参阅选项卡的示例：

import {createMuiTheme} from "@material-ui/core/styles";

const theme = createMuiTheme({
  overrides: {
    MuiTab: {
      root: {
        minHeight: 70
      }
    }
  }
});

// Under App 

const App = () => (
  <MuiThemeProvider theme={theme}>
    ....
  </MuiThemeProvider>
)

更多信息请参阅文档material-ui globals

【讨论】：