css - MUI 组件上的渐变边框

Question

我没有设法找到border-image-sourcecss的等价物

我的目标是在按钮组件上呈现边框渐变

Answer 1

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

V5

const options = {
  shouldForwardProp: (prop) => prop !== 'gradientColors',
};

const GradientButton = styled(
  Button,
  options,
)(({ theme, gradientColors }) => ({
  border: '5px solid',
  borderImageSlice: 1,
  borderImageSource: `linear-gradient(to left, ${gradientColors.join(',')})`,
}));

如果您想要一个带有渐变边框的圆形按钮，则不能使用上面的代码，因为borderImage 没有 radius。一种解决方法是在子元素中创建渐变背景，:after因为background可以使用以下方法进行剪切borderRadius：

const borderRadius = 15;
const RoundGradientButton = styled(
  Button,
  options,
)(({ theme, gradientColors }) => ({
  position: 'relative',
  border: '5px solid transparent',
  backgroundClip: 'padding-box',
  borderRadius,

  '&:after': {
    position: 'absolute',
    top: -5,
    left: -5,
    right: -5,
    bottom: -5,
    background: `linear-gradient(to left, ${gradientColors.join(',')})`,
    content: '""',
    zIndex: -1,
    borderRadius,
  },
}));

用法

<GradientButton gradientColors={['red', 'yellow']} variant="contained">
  Default
</GradientButton>
<RoundGradientButton gradientColors={['red', 'yellow']} variant="contained">
  Default
</RoundGradientButton>

现场演示

V4

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

现场演示

相关答案

• 如何为 MUI 芯片背景添加线性渐变颜色？