Material-UI 组件上的渐变边框

问题描述

我没有找到 border-image-source css 的等效项

我的目标是在按钮组件上渲染边框渐变

解决方法

这是向 button 组件添加渐变边框的方式:

const useStyles = makeStyles((theme: Theme) => ({
  button: {
    border: "6px solid",borderImageSlice: 1,borderImageSource: "linear-gradient(to left,red,orange)"
  }
}));

export default function ContainedButtons() {
  const classes = useStyles();

  return (
    <Button className={classes.button} variant="contained">
      Default
    </Button>
  );
}

现场演示

Edit 66995679/gradient-border-on-component-material-ui