css - 在 Material UI 中为 Tab 指示器设置边框

Question

我做了一个简单的NavBar，我用以下方式覆盖了标签指示器：

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

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

我的主要问题是，我希望指示器是像边框一样的正方形（而不是下划线），我可以在其中设置填充和其他相关内容。我怎样才能做到这一点？

标签： cssreactjsmaterial-ui

Answer 1

在Material-UI中，有些元素TabIndicator是一个span，而不是border-bottom，所以你需要完全移除它并添加你自己的边框，这样在标签之间切换时移除了过渡效果。此外，您希望边框颜色为渐变色，因此需要做一些工作。

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%"
      }
    }
  }
});

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

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

用法

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>
);

现场演示