How to Align tab-label and tab-icon horizontally in material-UI using Tabs API

问题

I am trying to overwrite the Material UI CSS and align the the phone icon and the phone text in the same line and closer to each other. I researched and found Tabs API.

Then I debugged and found the wrapper property was creating a problem. I tried fixing by setting display to block but the phone icon and phone text are still not aligning in same line.

I've provided code and sandbox below. All of my code is in 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>

回答1:

Change the line 331 to:

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

It's because the svg has a display of block, and it's pushing the text underneath. You can play with margins there and position it wherever you like.

回答2:

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

回答3:

This successfully aligns tab-text and tab-icon horizontally without disturbing the Tabs/TabPanel functionality.

The "Put Everything inside label" Way

<Tab label= {<div><HomeIcon style = { {verticalAlign : 'middle'} } /> Home </div>}/>

Source

CSS Way

Just add this to the CSS attached to your tabs component.

.MuiTab-wrapper {
  flex-direction: row !important;
}

Don't forget to add '!important', as we are overriding a predefined class .MuiTab-wrapper provided by mat-UI, so may not work after a reload without '!important'.

As a side note,

If you enclose Icons and tabs within a div and add some CSS to align both, it works however, you lose the Tabs/TabPanel functionality that material-UI gives out of the box.

If you are not bothered about the functionality, you can try this.

<div style={{display:'flex',alignItems:'center'}}>
       <HomeIcon/>
       <Tab label="Home" />
</div>

Hope this helps!

回答4:

Try inline-block

display: inline-block;

回答5:

Change :

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

to :

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

Just tried. It works.

Flex layout handles it without much pain across all browsers!!

EDIT:

Updated Fiddle with width of tabs: https://codesandbox.io/s/82ynv5qwy9

Changes:

1.

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

2.

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

来源：https://stackoverflow.com/questions/53289639/how-to-align-tab-label-and-tab-icon-horizontally-in-material-ui-using-tabs-api