如何使用CSS-in-JS重新编写此按钮及其悬停效果？

Question

我想要实现一个按钮的效果像这个https://codepen.io/electerious/pen/rroqdL，并希望它使它的反应组件。

最初的例子是使用css变量，所以我认为使用CSS更容易实现它，在我的例子中，我选择使用情感(https://emotion.sh)。

首先，这是我当前的代码

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>
  );
};

出口违约按钮；

然而，我遇到了两个困难。

1. 根据最初的示例，它使用<a/>直接在js文件中操作const aElem = document.querySelector('a') const boundingClientRect = aElem.getBoundingClientRect()标记。我不确定如何使用React来实现这一点，因为我似乎不知道如何直接访问即将在React中呈现的DOM元素。
2. 同样，原始示例使用const docStyle = document.documentElement.style。我不知道有什么反应。

我是新的反应，甚至CSS在JS的一般。如果有人可以使用React编写这个示例，我将非常感激。

Answer 1

实际上，您可以使用useRef (参见有关钩子的文档，更具体地说，这里是useRef钩子- https://reactjs.org/docs/hooks-reference.html#useref)钩子来实现这一点，而不需要更改大部分代码，不确定是否应该这样做，但它有效吗？

我使用了一个外部SCSS文件，而不是情感，但您应该能够相当容易地复制。

下面是工作示例：https://codesandbox.io/s/cocky-neumann-kik51?fontsize=14