Material UI - 标签图标样式

Question

我正在动态使用此选项卡：

        <Tabs
          value={value}
          onChange={handleChange}
          variant="scrollable"
          scrollButtons="off"
          indicatorColor="primary"
          textColor="primary"
          aria-label="scrollable"
          classes={{
            indicator: classes.indicator,
            flexContainer: classes.flexContainer,
          }}
        >
          {routes.map((value, index) => (
            <Tab
              classes={{
                root: classes.tabRoot,
                wrapper: classes.wrapper,
                labelIcon: classes.labelIcon,
                selected: classes.selected,
              }}
              key={index}
              label={strings(value)}
              icon={getIcon(value)}
              {...a11yProps(index)}
            />
          ))}
          {<Grid container>
            <Grid item xs>
              <PrintButton
                type= "widget"
                params={queryParams}
                style={{
                  textTransform: "capitalize",
                  float: "right"
                }}
              />
            </Grid>
          </Grid>}
        </Tabs>

这是 getIcon 函数：

const getIcon = (value) => {
  if (value === eventType.view) return <PageviewIcon />;
  if (value === eventType.lead) return <ContactsIcon />;
  if (value === eventType.share) return <ShareIcon />;
  if (value === eventType.follow) return <GroupAddIcon />;
  if (value === eventType.media) return <PermMediaIcon />;
  if (value === eventType.print) return <FindInPageIcon />;
  return null;
};

每个选项卡都是这样的：

我试图用一些填充标签中的图标来分开，如下所示：

但我无法找到一种方法来替换这个类MuiTab-labelIcon .MuiTab-wrapper默认情况下是这样的：

在更新到 Material UI v4 之前我没有遇到这个问题

我尝试在图标上使用内联样式，但导致图标非常小：

<ShareIcon style={{paddingBottom: '0px', paddingRight: "10px"}}/>

我将不胜感激任何帮助，提前致谢！！

Answer 1

用父组件包裹 Text 和 Icon 并应用

style={{ display: 'flex', alignItems: 'center', flexDirection: 'row', justifyContent: 'center' }}