выравнивание не происходит между значком и текстом на вкладках пользовательского интерфейса материала

Question

• Я пытаюсь переписать материал UI CSS.
• Я пытаюсь совместить значок телефона и текст телефона в одной строке и ближе друг к другу.
• поэтому я исследовал и нашел эту ссылку https://material -ui.com / api / tabs / # css-api
• затем я отладил и обнаружил, что свойство оболочки создает проблему.
• Я попытался исправить, выдав блок дисплея. но значок телефона и текст телефона не совпадают в одной строке.
• подскажите, как это исправить.
• с кодом и песочницей ниже.
• весь мой код находится в tab-demo.js

https://codesandbox.io/s/7p4ryw691

const styles = theme => ({
  root: {
    // flexGrow: 1,
    width: "100%",
    // flex: 0,
    textTransform: "capitalize"
    // backgroundColor: theme.palette.background.paper
    //  backgroundColor: 'red'
  },
  sportsAdvancedSearch: {
    // backgroundColor: 'green'
    color: "red",
    fontSize: 16,
    fontWeight: "bold"
  },
  sportsTotalNumber: {
    fontWeight: "bold"
  },
  sportsExportContainer: {
    paddingTop: 8,
    paddingBottom: 8
  },

  indicator: {
    backgroundColor: "red"
  },
  tabsIndicator: {
    backgroundColor: "red",
    textTransform: "capitalize"
  },
  tabRoot: {
    textTransform: "initial",
    width: "100%",
    display: "block",

    "&:hover": {
      color: "red",
      opacity: 1,
      textTransform: "initial"
    },
    "&$tabSelected": {
      color: "red",
      fontWeight: theme.typography.fontWeightMedium,
      textTransform: "capitalize"
    },
    "&:focus": {
      color: "red",
      textTransform: "capitalize"
    }
  },
  tabSelected: {},
  sportsHeading: {
    fontSize: 32,
    fontWeight: "bold",
    padding: 16
  },
  sportsTabHeader: {
    //  border: "1px solid red",
    backgroundColor: "#f5f5f5"
  },
  alignment: {
    display: "block"
    //  color: 'red'
  }
});

  <Tabs
            value={value}
            onChange={this.handleChange}
            scrollable
            scrollButtons="on"
            classes={{ indicator: classes.tabsIndicator }}
          >
            <Tab
              label="phone"
              icon={<PhoneIcon style={{ display: "block" }} />}
              classes={{
                root: classes.tabRoot,
                selected: classes.tabSelected,
                wrapper: classes.alignment
              }}
            />
            <Tab
              favorites={favorites}
              label="Favorites"
              icon={<FavoriteIcon style={{ display: "block" }} />}
              classes={{
                root: classes.tabRoot,
                selected: classes.tabSelected,
                wrapper: classes.alignment
              }}
            />
          </Tabs>

Answer 1

<Tab label={<><div>Some other label<Icon/></div></>}/>

Answer 2

Измените строку 331 на:

icon={<PhoneIcon style={{ display: "inline-block", marginBottom:"-10px" }} />}

Это потому, что у svg есть дисплей блока, и он выдвигает текст внизу. Вы можете играть с полями там и размещать их где угодно.

Answer 3

Изменение:

alignment: {
    display: "block"
    //  color: 'red'
  }

до:

alignment: {
    display: "flex",
    flexDirection: "row"
    //  color: 'red'
  }

Только что попробовал. Это работает.

Flex-макет справляется с этим без особых проблем во всех браузерах !!

EDIT:

Обновлена ​​скрипка с шириной вкладок : https://codesandbox.io/s/82ynv5qwy9

Изменения:

1

classes={{
              indicator: classes.tabsIndicator,
              scrollButtons: { display: "flex", flex: 1 }
            }}

2.

  tabRoot: {
    textTransform: "initial",
    width: "stretch",
    display: "flex",
    flex: 1,

Answer 4

Попробуйте встроенный блок

display: inline-block;