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

Question

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

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

source 中的行看起来是:

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 的技术:Overriding styles with classes