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

Question

我正在尝试将Material-UI Tabs 组件的高度设置为 32px。我知道这不是一个很好的用户体验想法，但是，我已经解释过，并且客户仍然想要它。

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

源中的行似乎是：

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

我无法弄清楚如何使用通过 Material-UI 公开的样式和主题来覆盖内部 div。

Answer 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 的技术：用类覆盖样式

Answer 2

我添加了内联样式组件，如下所示：

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

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

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