如何使用 Tabs API 在材质 UI 中水平对齐选项卡标签和选项卡图标

我正在尝试覆盖 Material UI CSS 并将电话图标和电话文本对齐在同一行并且彼此更靠近。我研究发现Tabs API https://material-ui.com/api/tabs/#css-api.

然后我调试并发现包装器属性产生了问题。我尝试通过将显示设置为阻止来修复，但电话图标和电话文本仍然没有在同一行对齐。

我在下面提供了代码和沙箱。我的所有代码都在 tab-demo.js 中

https://codesandbox.io/s/7p4ryw691 https://codesandbox.io/s/7p4ryw691

const styles = theme => ({
  root: {
    // flexGrow: 1,
    width: "100%",
    // flex: 0,
    textTransform: "capitalize"
    // backgroundColor: theme.palette.background.paper
    //  backgroundColor: 'red'
  },
  sportsAdvancedSearch: {
    // backgroundColor: 'green'
    color: "red",
    fontSize: 16,
    fontWeight: "bold"
  },
  sportsTotalNumber: {
    fontWeight: "bold"
  },
  sportsExportContainer: {
    paddingTop: 8,
    paddingBottom: 8
  },

  indicator: {
    backgroundColor: "red"
  },
  tabsIndicator: {
    backgroundColor: "red",
    textTransform: "capitalize"
  },
  tabRoot: {
    textTransform: "initial",
    width: "100%",
    display: "block",

    "&:hover": {
      color: "red",
      opacity: 1,
      textTransform: "initial"
    },
    "&$tabSelected": {
      color: "red",
      fontWeight: theme.typography.fontWeightMedium,
      textTransform: "capitalize"
    },
    "&:focus": {
      color: "red",
      textTransform: "capitalize"
    }
  },
  tabSelected: {},
  sportsHeading: {
    fontSize: 32,
    fontWeight: "bold",
    padding: 16
  },
  sportsTabHeader: {
    //  border: "1px solid red",
    backgroundColor: "#f5f5f5"
  },
  alignment: {
    display: "block"
    //  color: 'red'
  }
});

  <Tabs
            value={value}
            onChange={this.handleChange}
            scrollable
            scrollButtons="on"
            classes={{ indicator: classes.tabsIndicator }}
          >
            <Tab
              label="phone"
              icon={<PhoneIcon style={{ display: "block" }} />}
              classes={{
                root: classes.tabRoot,
                selected: classes.tabSelected,
                wrapper: classes.alignment
              }}
            />
            <Tab
              favorites={favorites}
              label="Favorites"
              icon={<FavoriteIcon style={{ display: "block" }} />}
              classes={{
                root: classes.tabRoot,
                selected: classes.tabSelected,
                wrapper: classes.alignment
              }}
            />
          </Tabs>

这成功对齐了选项卡文本和选项卡图标水平地不影响选项卡/选项卡面板功能。

“把所有东西都放在标签里”的方式

<Tab label= {<div><HomeIcon style = { {verticalAlign : 'middle'} } /> Home </div>}/>

Source https://github.com/mui-org/material-ui/issues/11653#issuecomment-571892544

CSS Way

只需将其添加到附加到选项卡组件的 CSS 中即可。

.MuiTab-wrapper {
  flex-direction: row !important;
}

不要忘记添加“！重要”，因为我们正在覆盖预定义的类.MuiTab-wrapper由 mat-UI 提供，因此在没有 '!important' 的情况下重新加载后可能无法工作。

作为旁注，

如果您将图标和选项卡包含在 div 中并添加一些 CSS 来对齐两者，那么它可以工作，但是您会失去 Material-UI 提供的开箱即用的选项卡/选项卡面板功能。

如果您不关心该功能，可以尝试一下。

<div style={{display:'flex',alignItems:'center'}}>
       <HomeIcon/>
       <Tab label="Home" />
</div>

希望这可以帮助！