Javascript 如何使用Tabs API在材质UI中水平对齐选项卡标签和选项卡图标

我试图覆盖材质UI CSS，并将手机图标和手机文本对齐在同一行中，并且彼此更靠近。我研究发现

然后我调试并发现包装器属性产生了问题。我试图通过设置display为block来进行修复，但手机图标和手机文本仍然没有对齐

我在下面提供了代码和沙盒。我所有的代码都在tab-demo.js中

constyles=theme=>({
根目录：{
//flexGrow:1，
宽度：“100%”，
//弹性：0，
textTransform：“大写”
//背景色：theme.palete.background.paper
//背景颜色：“红色”
},
sportsAdvancedSearch：{
//背景颜色：“绿色”
颜色：“红色”，
尺寸：16，
fontWeight：“粗体”
},
运动员总数：{
fontWeight：“粗体”
},
sportsExportContainer：{
paddingTop:8，
垫底：8
},
指标：{
背景颜色：“红色”
},
选项卡指示器：{
背景颜色：“红色”，
textTransform：“大写”
},
tabRoot：{
textTransform：“初始”，
宽度：“100%”，
显示：“块”，
“&：悬停”：{
颜色：“红色”，
不透明度：1，
textTransform：“初始”
},
“&$tabSelected”：{
颜色：“红色”，
fontWeight:theme.typography.fontWeightMedium，
textTransform：“大写”
},
“&：焦点”：{
颜色：“红色”，
textTransform：“大写”
}
},
所选选项卡：{}，
体育标题：{
字体大小：32，
fontWeight：“粗体”，
填充：16
},
sportsTabHeader：{
//边框：“1px纯红”，
背景颜色：“F5”
},
对齐：{
显示：“块”
//颜色：“红色”
}
});

尝试内联块

display: inline-block;

尝试内联块

display: inline-block;

---

将第331行更改为：

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

icon={}

---

这是因为svg有块的显示，它将文本推到下面。您可以在那里使用边距，并将其放置在您喜欢的任何位置。

将第331行更改为：

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

icon={}

这是因为svg有块的显示，它将文本推到下面。您可以在那里使用边距，并将其放置在您喜欢的任何位置。

更改：

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

致：

刚试过。它起作用了

FlexLayout在所有浏览器中都能轻松处理

编辑：

更新了标签宽度的提琴：

变化：

一,

二,

更改：

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

致：

刚试过。它起作用了

FlexLayout在所有浏览器中都能轻松处理

编辑：

更新了标签宽度的提琴：

变化：

一,

二,

---

这将成功地水平对齐选项卡文本和选项卡图标，而不会干扰选项卡/选项卡面板功能

“把所有东西都放在标签里”的方式

CSS方式 只需将其添加到附加到选项卡组件的CSS中

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

别忘了加上“！重要提示'，因为我们正在重写mat UI提供的预定义类

.MuiTab包装器

，所以在没有'，重新加载后可能无法工作！“重要”

作为旁注

如果将图标和选项卡括在一个div中，并添加一些CSS以使两者对齐，则会失去materialui提供的开箱即用的选项卡/选项卡面板功能

如果您对功能不感兴趣，可以试试这个

---

希望这有帮助

这将成功地水平对齐选项卡文本和选项卡图标，而不会干扰选项卡/选项卡面板功能

“把所有东西都放在标签里”的方式

CSS方式 只需将其添加到附加到选项卡组件的CSS中

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

别忘了加上“！重要提示'，因为我们正在重写mat UI提供的预定义类

.MuiTab包装器

，所以在没有'，重新加载后可能无法工作！“重要”

作为旁注

如果将图标和选项卡括在一个div中，并添加一些CSS以使两者对齐，则会失去materialui提供的开箱即用的选项卡/选项卡面板功能

如果您对功能不感兴趣，可以试试这个

---

希望这有帮助

嘿，谢谢你的回复…它起作用了，我试图减少每个标签的宽度，所以我给出了宽度，但没有减少…这里提供了我的更新代码…你能告诉我如何修复对齐：{display:“flex”，flexDirection:“row”，width:50}.ScrollableTabsButtonForce-tabRoot-7299.ScrollableTabsButtonForce-tabSelected-7300此类需要具有flex:1。但是，我在css api中没有看到scrollableTabButtonForcetabRoot的属性：{textTransform:“initial”，width:“stretch”，display:“flex”，flex:1，这是required@injiinji宽度值需要一个单位，请尝试以下操作：{display:“flex”，flexDirection:“row”，Width:“50%”@tagurit hey感谢您的回复…嘿，您的代码适用于较小的屏幕，但当您查找较大的屏幕时，手机图标仍然不在红线的起始处…是否仍然可以这样做？嘿，谢谢您的回复…它起作用了。我也尝试减少每个选项卡，因此我给出了宽度，但没有减少…提供g我在这里更新的代码…你能告诉我如何修复对齐：{display:“flex”，flexDirection:“row”，width:50}.ScrollableTabsButtonForce-tabRoot-7299.ScrollableTabsButtonForce-tabSelected-7300这个类需要flex:1。但是我在css api中没有看到scrollableTabButtonForcetabRoot的属性：{textTransform:“初始”，宽度：“拉伸”，显示：“弹性”，弹性：1，这是required@injiinji宽度值需要一个单位，请尝试类似于

对齐：{display:“flex”，flexDirection:“row”，Width:“50%”之类的方法。

@

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