如何修改React Material-UI中激活标签的inkBarStyle颜色与厚度

嘿，作为嵌入式程序员刚接触前端GUI，踩点小坑很正常，我来帮你把这个问题捋明白！

正确设置黑色+加厚下划线的写法 #

你之前找到了inkBarStyle这个正确的属性，但写法上有小问题。正确的多属性写法是把所有样式放在同一个对象里，而且要注意React内联样式的驼峰式规则，调整厚度应该用height属性，比如：

<Tabs inkBarStyle={{background: 'black', height: '8px'}}>
  {/* 你的标签内容放在这里 */}
</Tabs>

这样就能把激活标签的下划线改成黑色，同时把厚度调整到8px（数值可以根据你的需求修改，比如5px会更细腻）。

为什么之前的尝试失败？ #

• 第一种写法{{background: 'black'}, {background-size: 100% 300%}}：语法错误，inkBarStyle只接受单个对象，不能传两个独立的对象。
• 第二种写法里的background-size：这个CSS属性是用来控制背景图片的尺寸，不是调整下划线厚度的，而且React内联样式里要写成驼峰式backgroundSize才会生效。
• 第三种写法的height: 100px：单位写法没问题，但数值过大，可能超出了标签栏的高度范围，导致视觉上没达到预期，改成小数值就会正常显示了。

关于inkBarStyle的可用属性 #

inkBarStyle本质上就是React的内联样式对象，支持所有标准的CSS属性，只要把CSS属性名改成驼峰式（比如CSS的margin-top改成marginTop，border-radius改成borderRadius）就行。你不用找Material-UI专属的属性列表，所有合法的CSS样式都能在这里使用，比如想给下划线加圆角可以写：

<Tabs inkBarStyle={{background: 'black', height: '8px', borderRadius: '4px'}}>

内容的提问来源于stack exchange，提问作者Gabriel Staples