Javascript 如何使用JS中的React with CSS重写这个按钮的悬停效果

我想实现一个这样的效果按钮，并希望它成为一个反应组件

最初的例子是使用css变量，所以我认为在JS中使用css实现它会更容易，在我的例子中，我选择使用情感

首先，这是我当前的代码

import React from "react";
import { css } from "@emotion/core";

const style = css`
  a {
    position: relative;
    display: inline-block;
    padding: 1.2em 2em;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    user-select: none;
    color: white;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: linear-gradient(135deg, #6e8efb, #a777e3);
      border-radius: 4px;
      transition: box-shadow 0.5s ease, transform 0.2s ease;
      will-change: transform;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0))
        rotateY(var(--ry, 0)) translateZ(var(--tz, -12px));
    }

    &:hover::before {
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    &::after {
      position: relative;
      display: inline-block;
      content: attr(data-title);
      transition: transform 0.2s ease;
      font-weight: bold;
      letter-spacing: 0.01em;
      will-change: transform;
      transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0))
        rotateY(var(--ry, 0));
    }
  }
`;

const Button = () => {
  return (
    <div css={style}>
      <a href="#" dataTitle="Awesome Button">
        Button
      </a>
    </div>
  );
};

导出默认按钮

然而，我遇到了两个困难

根据原始示例，它使用const aElem=document.querySelector'a'const boundingClientRect=aElem.getBoundingClientRect直接在js文件中操作标记。我不确定如何使用React实现这一点，因为我似乎不知道如何直接访问我将在React中呈现的DOM元素

同样，原始示例使用const docStyle=document.documentElement.style。我不知道React中的等价物

---

一般来说，我对JS中的React甚至CSS都是新手。如果有人能使用React编写出这个示例，我将不胜感激

实际上，您可以使用useRef来实现这一点。请参阅钩子文档，更具体地说，这里是useRef钩子-钩子，无需更改大部分代码，不确定是否应该这样做，但它可以工作吗

我使用了一个外部SCSS文件，而不是情感文件，但您应该能够非常轻松地进行复制

---

以下是工作示例：

您好，感谢您的及时回复。对不起，你说“不确定你是否应该这样做”是什么意思，但它是有效的？。你的意思是说使用useRef不是一个好的实践吗？React团队一直不鼓励REF，因为这是命令式编程，而不是React通常的声明方式。如果你觉得这个答案很有用，我可以请你投票或者在某个时候接受答案：thanksHi。抱歉，最后一个问题，有没有一种方法可以将按钮中显示的标题设置为“`”，即“真棒”按钮？当然@Joji我刚刚更新了codesandbox示例，向您展示了如何将其作为道具传递下去。