Css 在物料界面中设置选项卡指示器的边框

我制作了一个简单的

NavBar

，并以以下方式重写了选项卡指示器：

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

{...}

---

我的主要问题是，我希望指示器是一个类似边框的正方形（而不是下划线），在这里我可以设置填充和其他相关内容。如何实现这一点？

在物料界面中，

TabIndicator

是一个边框，而不是某些元素的底部，因此您需要完全删除它并添加您自己的边框，这样可以在切换选项卡时消除过渡效果。此外，您还希望您的边框颜色是渐变色，所以这需要一些工作

const useStyles=makeStyles({
指标：{
背景：“无”//移除MUI指示器
},
选项卡：{
“&按钮”：{
填充：5//边框的大小
},
“&按钮[aria selected='true']”：{
职位：“相对”，
“&：之前”：{
内容：“”“”，
位置：“绝对”，
左:0,，
排名：0，
右:0,，
底部：0，
背景：“线性梯度（45度，#FE6B8B 30%，#FF8E53 90%），//边框颜色
zIndex:0
},
“&>*”：{zIndex:0}，
“&>MuiTab包装器”：{
背景：“fff”，
身高：“100%”
}
}
}
});

但是，如果您只希望边框使用单一颜色，则实现起来会容易得多：

const useStyles=makeStyles({
指标：{
背景：“无”
},
选项卡：{
“&按钮[aria selected='true']”：{
边框：“3件纯红”
}
}
});

用法

const classes=useStyles（）；
返回(
);

现场演示

---

非常感谢，你帮了很多忙：）

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