React中react-awesome-reveal的<Fade>组件为何覆盖所有层级？

移除<Fade>代码后页面功能正常，但添加该组件后，即便放在正常层级的<div>内部，它也会覆盖所有元素始终处于顶层。已经试过z-1、z-10这类Tailwind的z-index类名，都没法解决。

用户代码示例：

import React from "react";
import { Fade } from "react-awesome-reveal";

export const About = () => {
  return (
    <div name="about" className="w-full h-screen bg-[#124559] text-gray-300">
      <div className="flex px-14 flex-col justify-center items-center w-full h-full">
        <div className="max-w-[1000px] w-full grid grid-cols-2 gap-8">
          <div className="sm:text-right pb-8 pl-4">
            <p className="text-4xl font-bold inline border-b-4 border-pink-600">
              About
            </p>
          </div>
          <div></div>
        </div>
        <div className="max-w-[1000px] w-full grid sm:grid-cols-2 gap-8 px-4">
          <div className="sm:text-right text-4xl font-bold">
            <Fade direction="left">
              <p>Get to know me:</p>
            </Fade>
          </div>
          <div>
            <Fade>
              <p>
                I'm a computer major
              </p>
            </Fade>
          </div>
        </div>
      </div>
    </div>
  );
};
export default About;

解决方案 #

• 给Fade组件添加relative定位
  react-awesome-reveal的Fade默认会用绝对定位或变换样式导致层级脱离，给组件加上relative类，让它回到正常文档流层级：

  <Fade direction="left" className="relative">
    <p>Get to know me:</p>
  </Fade>
  

• 强制重置组件默认样式
  如果上面的方法不生效，在全局样式或组件样式里添加规则，强制Fade继承父元素的层级：

  .react-awesome-reveal {
    position: relative !important;
    z-index: inherit !important;
  }
  

• 外层包裹定位容器
  在Fade外面套一层带relative和z-index的div，把层级控制权放在外层：

  <div className="relative z-10">
    <Fade direction="left">
      <p>Get to know me:</p>
    </Fade>
  </div>
  

内容的提问来源于stack exchange，提问作者Levi