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

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

distributed.properties

材质用户界面-标签图标样式

1 个答案: