如何在 Tab 组件中更改 Icon 组件的位置？答案

【问题标题】：How to change the position of an Icon component, within a Tab component?如何在 Tab 组件中更改 Icon 组件的位置？
【发布时间】：2019-03-09 14:18:28
【问题描述】：

我在我的 React 项目中使用 MaterialUI 的选项卡。

这是标签的 JSX：

<AppBar color="default" position="static">
       <Tabs indicatorColor="primary" textColor="primary" value={tabIndex} onChange={this.handleChange}>
         {instances.map(instance =>    
            <StyledTab                        
                    style={{ textTransform: 'initial' }}
                    onClick={() => { this.changeActiveInstance(instance.id) }}
                    label={this.getTabAddress(instance)}
                    icon={<ClearIcon ></ClearIcon>}
                  >    
            </StyledTab>
         )}                   
 </Tabs>

这就是我注入 css 的方式：

const StyledTab = withStyles({
  root: {
    textTransform: 'initial' 
  },  
})(Tab);

结果是这样的：

我想将“ClearIcon”放置在别处。我尝试了一点样式注入，但没有成功。

有人能指出正确的方向吗？

【问题讨论】：

您可以尝试在 StyledTab 中设置flexDirection: 'row' 吗？这会将图标放在左边，文本放在右边。

标签： css reactjs material-ui

【解决方案1】：

当尝试自定义任何 Material-UI 组件时，起点是CSS portion of the API documentation。在这种情况下，您可能想要覆盖的最相关的类是 wrapper、labelContainer 和 label。

充分了解这些是如何使用的以及它们的默认样式（以及因此您可能想要覆盖的内容）的最佳方式是查看source code。

以下是来自Tab.js 的样式中最相关的部分：

  /* Styles applied to the `icon` and `label`'s wrapper element. */
  wrapper: {
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    flexDirection: 'column',
  },
  /* Styles applied to the label container element if `label` is provided. */
  labelContainer: {
    width: '100%', // Fix an IE 11 issue
    boxSizing: 'border-box',
    padding: '6px 12px',
    [theme.breakpoints.up('md')]: {
      padding: '6px 24px',
    },
  },

以下是了解如何使用它们的相关代码：

    if (labelProp !== undefined) {
      label = (
        <span className={classes.labelContainer}>
          <span
            className={classNames(classes.label, {
              [classes.labelWrapped]: this.state.labelWrapped,
            })}
            ref={ref => {
              this.labelRef = ref;
            }}
          >
            {labelProp}
          </span>
        </span>
      );
    }

        <span className={classes.wrapper}>
          {icon}
          {label}
        </span>

以下是一些可能的自定义方法示例。

import React from "react";
import PropTypes from "prop-types";
import Paper from "@material-ui/core/Paper";
import { withStyles } from "@material-ui/core/styles";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import PhoneIcon from "@material-ui/icons/Phone";
import FavoriteIcon from "@material-ui/icons/Favorite";
import PersonPinIcon from "@material-ui/icons/PersonPin";

const styles = {
  root: {
    flexGrow: 1,
    maxWidth: 700
  },
  firstIcon: {
    paddingLeft: 70
  },
  labelContainer: {
    width: "auto",
    padding: 0
  },
  iconLabelWrapper: {
    flexDirection: "row"
  },
  iconLabelWrapper2: {
    flexDirection: "row-reverse"
  }
};

class IconLabelTabs extends React.Component {
  state = {
    value: 0
  };

  handleChange = (event, value) => {
    this.setState({ value });
  };

  render() {
    const { classes } = this.props;

    return (
      <Paper square className={classes.root}>
        <Tabs
          value={this.state.value}
          onChange={this.handleChange}
          variant="fullWidth"
          indicatorColor="secondary"
          textColor="secondary"
        >
          <Tab
            icon={<PhoneIcon className={classes.firstIcon} />}
            label="Class On Icon"
          />
          <Tab
            classes={{
              wrapper: classes.iconLabelWrapper,
              labelContainer: classes.labelContainer
            }}
            icon={<FavoriteIcon />}
            label="Row"
          />
          <Tab
            classes={{
              wrapper: classes.iconLabelWrapper2,
              labelContainer: classes.labelContainer
            }}
            icon={<PersonPinIcon />}
            label="Row-Reverse"
          />

          <Tab icon={<PersonPinIcon />} label="Default" />
        </Tabs>
      </Paper>
    );
  }
}

IconLabelTabs.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(IconLabelTabs);

【讨论】：