记录一下按钮实现渐变边框跟antd的Button.js实现不同主题颜色

本文链接：https://blog.csdn.net/qq_36257356/article/details/125769343

本文记录了如何在React项目中，利用antd的Button组件实现不同主题颜色的渐变边框。通过在button.js中设置admin-theme.js和theme.js文件，结合variant属性区分自定义颜色，并利用CSS的background-clip和background-origin属性来调整边框效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

button.js里面

import { Button as AntButton } from "antd";
import styled, { css } from "styled-components";

export const styles = {
  primary: css`
    color: ${props => props.theme.palette.primary.text};
      // background-color: ${props => props.theme.palette.primary.main};
      // border-color: ${props => props.theme.palette.primary.main};
    background-color: #0678d0;
    border-color: #0678d0;

    &:hover,
    &:focus,
    &:active {
      color: ${props => props.theme.palette.primary.text};
      border-color: ${props => props.theme.palette.primary.main};
      background-color: ${props => props.theme.palette.primary.main};
    }
  `,
  linear: css`
    //渐变背景按钮
    color: ${props => props.theme.palette.linear.text} !important;
    background-color: transparent !important;
    border-color: unset !important;
    background-image: linear-gradient(${props => props.theme.palette.linear.deg}deg, ${props => props.theme.palette.linear.color1} 17%, ${props => props.theme.palette.linear.color2} 78%);
    font-weight: 600;

    &:hover,
    &:focus,
    &:active {
      opacity: 0.6;
      color: ${props => props.theme.palette.linear.text} !important;
      background-color: transparent !important;
      border-color: unset !important;
      background-image: linear-gradient(${props => props.theme.palette.linear.deg}deg, ${props => props.theme.palette.linear.color1} 17%, ${props => props.theme.palette.linear.color2} 78%);
    }
  `,
  linearBorder: css`
    //渐变边框按钮
    color: ${props => props.theme.palette.linearBorder.text} !important;
    border: 2px solid transparent;
    border-radius: 32px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient( ${props => props.theme.palette.linearBorder.white}, ${props => props.theme.palette.linearBorder.white}), linear-gradient(${props => props.theme.palette.linearBorder.deg}deg,  ${props => props.theme.palette.linear.color1} 17%, ${props => props.theme.palette.linear.color2} 78%);
    font-weight: 600;
    
    &:hover,
    &:focus,
    &:active {
      opacity: 0.6;
      color: ${props => props.theme.palette.linearBorder.text} !important;
      border: 2px solid transparent;
      border-radius: 32px;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      background-image: linear-gradient( ${props => props.theme.palette.linearBorder.white}, ${props => props.theme.palette.linearBorder.white}), linear-gradient(${props => props.theme.palette.linearBorder.deg}deg,  ${props => props.theme.palette.linear.color1} 17%, ${props => props.theme.palette.linear.color2} 78%);
    }
  `,
};

export const Button = styled(AntButton)`
  ${styles.default}
  ${props => styles[props.variant]};
`;

admin-theme.js文件

import { palette as commonPalette } from "./theme";

export const palette = {
  ...commonPalette,
  primary: {
    main: "#00B89F",
    text: "#ffffff",
  },
  backgroundColor: "#fff",
  textColor: "#000000",
  linear:{
    color1:"#00f5be",
    color2:"#00e6f5",
    deg:105,
    text:"#ffffff"
  },
  linearBorder:{
    color1:"#00f5be",
    color2:"#00e6f5",
    deg:105,
    text:"#111111",
    white:"#ffffff",
  }
};
export const adminTheme = { palette };

theme.js文件

export const palette = {
  primary: {
    main: "#165383",
    text: "#ffffff",
  },
  text: {},
  backgroundColor: "#101d3d",
  textColor: "#000000",
  linear:{
    color1:"#00f5be",
    color2:"#00e6f5",
    deg:105,
    text:"#ffffff"
  },
  linearBorder:{
    color1:"#00f5be",
    color2:"#00e6f5",
    deg:105,
    text:"#111111",
    white:"#ffffff",
  },
};
export const commonTheme = { palette };

按钮使用

 <Button variant="linear">See More</Button>

variant这个属性区分不同自定义的颜色

单个的css

.liner-css{
    min-width: 110px;
    height: 48px;
    padding: 0 20px;
    text-align: center;
    margin: 0 10px;
    color: #979797;
    background-color: #ffffff;
    border-color: #979797;
    border-radius: 23px;
    font-size: 14px;
    border: 2px solid transparent;
    border-radius: 32px;
    background-clip: padding-box,border-box;
    background-origin: padding-box,border-box;
    background-image: linear-gradient( #ffffff,#ffffff),linear-gradient(105deg,#00f5be 17%,#00e6f5 78%);
    font-weight: 600;
}

主要这两个

background-clip: padding-box,border-box;
background-origin: padding-box,border-box;