Question

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

我尝试在Tabs组件本身上设置高度。然后在它内部的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

Answer 2

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

def forward(self, x):
    x = F.relu(self.action_head2(F.relu(self.action_head(F.relu(self.affine1(x))))))
    action_scores = self.action_head3(x)
    state_values = self.value_head(x)
    print(action_scores)
    return F.sigmoid(action_scores)*7, state_values

这对我有用，希望它对您也有用

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

Answer 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

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

3 个答案: