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

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

Это JSX для вкладок:

<AppBar color = "default" position = "static">
       <Tabs indicatorColor = "primary" textColor = "primary" value = {tabIndex} onChange = {this.handleChangeEvent}>
         {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);

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

Я хотел бы разместить «ClearIcon» в другом месте. Я попытался немного поиграть с инъекцией стиля, но безуспешно.

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

Можете попробовать установить flexDirection: 'row' в StyledTab? Это поместит иконку слева, а текст справа.

— 09.03.2019 15:34

css reactjs material-ui

09.03.2019 15:18

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

6 148

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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
  };

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

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

    return (
      <Paper square className = {classes.root}>
        <Tabs
          value = {this.state.value}
          onChange = {this.handleChangeEvent}
          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);

Edit Tab Icon Placement