Как изменить положение компонента Icon внутри компонента Tab?

Question

Я использую вкладки MaterialUI в своем проекте React.

Это 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 в другом месте.Я попытался немного поиграть с внедрением стиля, но безуспешно.

Может кто-нибудь указать мне правильное направление?

Answer 1

При попытке настроить любой компонент Material-UI отправной точкой является часть CSS документации API . Наиболее релевантными классами, которые вы можете переопределить в этом случае, являются wrapper, labelContainer и label.

Лучший способ полностью понять, как они используются и как они оформляются по умолчанию (и, следовательно, что вы можете переопределить), - это посмотреть на исходный код .

Вот наиболее важные части стилей из 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);