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

Question

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...

Answer 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.. ie

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.

Answer 2

The inkBarStyle solution has been deprecated.

You can now use the TabIndicatorProps to style the active indicator color & thickness with the current version of MUI (4.10.02). Docs available here .

Here's how to do it using className: {classes}

import React from "react";
import PropTypes from "prop-types";
import { Tabs, Tab, makeStyles } from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  indicator: {
    backgroundColor: "green",
    height: "10px",
    top: "45px"
  },
  tabsWrapper: {
    height: "60px",
    background: "lightgreen"
  }
}));

const TabsIndicator = () => {
  const classes = useStyles();

  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <React.Fragment>
        <Tabs
          value={value}
          onChange={handleChange}
          className={classes.tabsWrapper}
          TabIndicatorProps={{ className: classes.indicator }}
        >
          <Tab label="TEST1" value={0} />
          <Tab label="TEST2" value={1} />
          <Tab label="TEST3" value={2} />
          <Tab label="TEST4" value={3} />
        </Tabs>
    </React.Fragment>
  );
};

export default TabsIndicator;

indicator: {backgroundColor: ""} changes the active indicator color

indicator: {height: ""} changes the active indicator thickness

indicator: {top: ""} positions the active indicator from the top of the wrapper

tabsWrapper: {height: ""} changes the height of <Tabs/> . It is necessary to change this if your indicator is too thick until it is outside .

tabsWrapper: {backgroundColor: ""} changes the backgroundColor of <Tabs/>

You can also check out my sandbox here for further reference. Hope this helps!