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

最新推荐文章于 2024-07-10 15:55:57 发布

啊黑啊

最新推荐文章于 2024-07-10 15:55:57 发布

阅读量843

点赞数

分类专栏： css 文章标签： react.js css

本文链接：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属性来调整边框效果。

摘要由CSDN通过智能技术生成

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 => pro