Question: I am trying to write a simple function that give me band 1 if value is zero
Band 2 if its between 0 to 150k 
Band 3 if between 150 k to 500k and so on

I only get 1 if value is zero and everything else is 2 , even if I enbter 10 million

Please help 

```
Function Band(ARR)

    Select Case ARR

        Case Is = 0
            Band = 1

        Case Is >= 0.1 And ARR <= 150000
            Band = 2

        Case Is >= 150000.01 And ARR <= 500000
            Band = 3

        Case Is >= 500000.01 And ARR <= 1500000
            Band = 4

        Case Is >= 1500000.01
            Band = 5

        Case Else
            Band = 6

    End Select

End Function

```

Answer: 
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.
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](https://material-ui.com/api/tabs/).

**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](https://codesandbox.io/s/material-ui-tabs-sbwch?file=/src/pages/sections/Tabs01indicator.js:0-2178) for further reference. Hope this helps!