MUI 组件上的渐变边框

Question

我没能找到 border-image-source css

的等价物

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

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 doesn't have a 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 组件上的渐变边框

Gradient border on MUI component

css

reactjs

material-ui

jss

makestyles

V5

用法

现场演示

V4

现场演示

相关回答