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' }}