javascript - 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

使用父组件包裹文本和图标并应用

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