Javascript 带有 MUI 的渐变跟踪按钮

这是一个有效的codesandbox.

让我来解释一下你的方法的一些缺点.

1. 强制查询 Select 带有类的按钮并添加事件处理程序.如下所示:

    let button:<Element | null> = document.querySelector('.mouse-cursor-gradient-tracking');
    button.addEventListener('mousemove', e => {
        let rect = e.target.getBoundingClientRect();
        let x = e.clientX - rect.left;
        let y = e.clientY - rect.top;
        button.style.setProperty('--x', x + 'px');
        button.style.setProperty('--y', y + 'px');
    });

相反，您可以将事件处理程序直接添加到React中的按钮组件.因此，React要注意如何将事件添加到组件中.

const Component = () => {

  const mouseDownHandler = (e) => {
    // logic here
  }
  
 return (<button onMouseDown={mouseDownHandler}>Click me</button>);
};

2. 使用与styled或css-in-js混合的类.

const HoverButton = styled(Button)(({ theme }) => ({
    ".mouse-cursor-gradient-tracking": {
        position: "relative",
        background: "#7983ff",
      },
    ".mouse-cursor-gradient-tracking span": {
        position: "relative",
      },
      
      ".mouse-cursor-gradient-tracking:before": {
        --size: 0,
        content: '',
      },
      
      ".mouse-cursor-gradient-tracking:hover:before": {
        "--size": "200px"
      },
}));

相反，您可以简单地执行以下操作:

const HoverButton = styled(Button)`  
  position: relative;
  background: #7983ff;

  & > span {
    ... your code here
  }

  &:before {
   ... your code here
  }
  
  &:hover:before {
   ... your code here
  } 
`;

const SubmitButton = () => {
 return <HoverButton>Text</HoverButton>
}

该样式将直接应用于带有伪类的按钮.除非您试图覆盖另一个库中的现有类，否则不需要单独的自定义类(js引擎中的css将创建一个自己带有哈希的类).

3. 动态更新样式.

button.addEventListener('mousemove', e => {
  ...other codes
  button.style.setProperty('--x', x + 'px');
  button.style.setProperty('--y', y + 'px');
});

这不会动态更新按钮的样式.我们可以使用一个状态，该状态可以使用第1点中提到的处理程序进行更新，并将其作为props 传递给样式化按钮，并使用它更改css值.

这是完整的工作代码.

import { useState } from "react";
import { styled, Theme } from "@mui/material/styles";
import { Button, SxProps } from "@mui/material";
import "./styles.css";

const StyledButton = styled(Button)<{ left: number; top: number }>`
  position: relative;
  background: #7983ff;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  border: none;
  color: white;
  cursor: pointer;
  outline: none;
  overflow: hidden;

  &:before {
    content: "";
    left: ${({ left }) => left}px;
    top: ${({ top }) => top}px;
    position: absolute;
    width: 0;
    height: 0;
    background: radial-gradient(circle closest-side, pink, transparent);
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease;
  }

  &:hover:before {
    color: red;
    width: 200px;
    height: 200px;
  }
`;

const SubmitButton = (props: {
  children?: React.ReactNode;
  sx?: SxProps<Theme>;
}) => {
  const [hoverStyle, setHoverStyle] = useState({
    left: 0,
    top: 0
  });

  const handleMouseMove: React.MouseEventHandler<HTMLButtonElement> = (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const left = e.clientX - rect.left;
    const top = e.clientY - rect.top;

    setHoverStyle({ left, top });
  };

  return (
    <StyledButton
      left={hoverStyle.left}
      top={hoverStyle.top}
      type="submit"
      variant="contained"
      sx={props.sx}
      onMouseMove={handleMouseMove}
    >
      <span>Hover me</span>
    </StyledButton>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <SubmitButton />
    </div>
  );
}

资源链接: