如何在React Material-UI中更改活动选项卡inkBarStyle的颜色和厚度? [英] How to change active tab inkBarStyle color and thickness in React Material-UI?

问题描述

在此查看此问题: 如何在React material-ui中更改活动标签的颜色?

这里的答案是: https://stackoverflow.com/a/37332913/4561887

他们给出的答案有效:

<Tabs inkBarStyle={{background: 'blue'}}>...

但是我也想将inkBarStyle更改为黑色和较厚. 这是Material-UI Tabs文档，在其中找到了inkBarStyle Tabs属性: http://www.material-ui.com/#/components/tabs .

But I'd also like to change the inkBarStyle to be black and thicker. Here's the Material-UI Tabs documentation where I found the inkBarStyle Tabs property: http://www.material-ui.com/#/components/tabs.

这就是我尝试过的.都失败了:

Here's what I've tried. All have failed:

<Tabs inkBarStyle={{background: 'black'}, {background-size: 100% 300%}}>
<Tabs inkBarStyle={{background: 'black', background-size: 100% 300%}}>
<Tabs inkBarStyle={{background: 'black', height: 100px}}>
etc.

此外，在哪里可以找到可以在此处设置的inkBarStyle选项的列表，以及如何一次设置多个选项?我可以在这里使用任何CSS属性吗?例如:清单: http://www.htmldog.com/references/css/properties/

Also, where do I find a list of possible inkBarStyle options I can set here, and how do I set multiple options at once? Can I use any CSS property here? Ex: list: http://www.htmldog.com/references/css/properties/

请很好:我是一位尝试修改GUI的嵌入式(微控制器)程序员.在这里离开我的联盟之路...

Please be nice: I'm an embedded (microcontroller) programmer here trying to modify a GUI. Way out of my league here...

推荐答案

如果您检查ink元素，则会看到其厚度由height定义.

If you inspect that ink element you'll see it's thickness is defined by it's height.

因此，除了background是您想要的height值之外，您还需要传递.

So you'd need to pass besides the background is the height value you want.. i.e.

inkBarStyle={{ background: "#000", height: "5px", marginTop: "-5px" }}

marginTop值是必需的，因此墨水不会超出Tab元素之外.您可以在这里玩:

The marginTop value is needed so the ink doesn't go outside the Tab element. You can play around it here:

https://codesandbox.io/s/jpnr541543
Hello.js组件具有与标签相关的代码.

https://codesandbox.io/s/jpnr541543
Hello.js component has the tabs related code.

这篇关于如何在React Material-UI中更改活动选项卡inkBarStyle的颜色和厚度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！