Question

我正在尝试覆盖材料的ui css。
我正在尝试将电话图标和电话文本对齐在同一行中，并且彼此靠得更近。
所以我研究并找到了此链接https://material-ui.com/api/tabs/#css-api
然后我调试并发现包装器属性正在造成问题。
我尝试通过显示块来修复问题。但是电话图标和电话文本仍然不在同一行。
你能告诉我如何解决它吗？
在下面提供代码和沙箱。
我所有的代码都在tab-demo.js中

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

将第331行更改为：

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

这是因为svg具有块显示，并且将文本压在下面。您可以在那边玩边距，然后将其放置在任意位置。

Answer 2

这可以成功地水平对齐标签文本和标签图标，而不会干扰Tabs / TabPanel功能。

“将所有内容放入标签内”方式

   Content-Disposition:  attachment; filename="file_name.pdf"

Source

CSS方式

只需将其添加到标签页组件附带的CSS中即可。

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

别忘了添加'！important'，因为我们正在覆盖mat-UI提供的预定义类.MuiTab-wrapper { flex-direction: row !important; }，因此在没有'！important'的重载后可能无法正常工作。

作为旁注，

如果在div内包含图标和选项卡，并添加一些CSS使其对齐，则可以使用，但是，您将失去material-UI开箱即用的Tabs / TabPanel功能。

如果您不介意该功能，可以尝试一下。

.MuiTab-wrapper

希望这会有所帮助！

Answer 3

尝试内联阻止

display: inline-block;

Answer 4

更改：

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

至：

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

只是尝试过。可以。

Flex布局可以轻松处理所有浏览器！

编辑：

更新了带有标签宽度的小提琴：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 5

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

材质ui选项卡中的图标和文本之间未对齐

5 个答案:

“将所有内容放入标签内”方式

CSS方式