How to change active tab inkBarStyle color and thickness in React Material-UI?

问题

See this question here: How change active tab color in React material-ui?

And this answer here: https://stackoverflow.com/a/37332913/4561887

The answer they gave works:

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

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.

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/

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

回答1:

If you inspect that ink element you'll see it's thickness is defined by it's 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" }}

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 component has the tabs related code.

来源：https://stackoverflow.com/questions/50401130/how-to-change-active-tab-inkbarstyle-color-and-thickness-in-react-material-ui

标签

javascript

reactjs

user-interface

material-ui