CODEWITHSUNDEEP
cssreactjsmaterial-ui
MrNobody
MrNobody

Reputation: 655

Set border for Tab indicator in Material UI

I made a simple NavBar and I overwrote the tab indicator in the following way:

indicator: {
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
},

<Tabs classes={{indicator: classes.indicator}} onChange={handleClickTab} value={value}>
   {...}
</Tabs>

My main problem is, that I want the indicator to be a square like a border ( instead of an underline ) where I can set paddings and other related things. How can I achieve this?

Upvotes: 2

Views: 10063

Answers (3)

Martin Giando
Martin Giando

Reputation: 11

You can use this class directly on your CSS and modify the Tab Border by default

.css-1aquho2-MuiTabs-indicator {
 background-color: white!important;
}

Hope it helps

Upvotes: 1

user13423237
user13423237

Reputation:

firstly, i know theres a correct answer on the top but if you want another way this is another way to dot... this is not a good approach but this is what i did:

css:

//And This is for the color of the text ↓
.MuiTab-textColorPrimary.Mui-selected {
  color: var(--darkGreen) !important;
}

//this is for changing the span or bottom border ↓
.PrivateTabIndicator-colorPrimary-4 {
  background-color: var(--darkGreen) !important;
}

All i did was get their classnames and override/overwrite them by using the !important method on css

If it did helped you, which it did to me... Then Im Glad I helped! :) Cheers!

Upvotes: 1

NearHuscarl
NearHuscarl

Reputation: 81270

In Material-UI, TabIndicator is a span, not border-bottom of some elements, so you need to remove it completely and add your own border, which removes the transition effect when switching between tabs. Also you want your border color to be gradient, so that requires a bit of work.

const useStyles = makeStyles({
  indicator: {
    background: "none" // remove MUI indicator
  },
  tabs: {
    "& button": {
      padding: 5 // the size of the border
    },
    "& button[aria-selected='true']": {
      position: "relative",

      "&:before": {
        content: '""',
        position: "absolute",
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)", // border color
        zIndex: 0
      },

      "& > *": { zIndex: 0 },
      "& > .MuiTab-wrapper": {
        background: "#fff",
        height: "100%"
      }
    }
  }
});

However, if you only want a single color for your border it becomes much easier to implement:

const useStyles = makeStyles({
  indicator: {
    background: "none"
  },
  tabs: {
    "& button[aria-selected='true']": {
      border: "3px solid red"
    }
  }
});

Usage

const classes = useStyles();

return (
  <Tabs
    className={classes.tabs}
    classes={{ indicator: classes.indicator }}
    {...props}
  >
    <Tab label="Item One" />
    <Tab label="Item Two" />
    <Tab label="Item Three" />
  </Tabs>
);

Live Demo

Edit 66769333/set-border-for-tab-indicator-in-material-ui

Upvotes: 1

Related Questions