如何在Next.js+Tailwind CSS项目中复用自定义hover效果到多组件多页面？

我基于Next.js + Tailwind CSS技术栈实现了一个文本hover切换效果，现在希望能快速把这个效果应用到所有页面的文本元素上，不用重复编写样式代码。

原CSS实现代码：

/*Hover Effect*/
.container {
  position: relative;
  width: 200px;
  height: 100px;
  overflow: hidden;
}

.one,
.two {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
  color: white;
}

.container:hover .one {
  transform: translateY(-100%);
}

.container:hover .two {
  transform: translateY(0);
  color: dimgray;
}

.two {
  transform: translateY(100%);
}

页面组件结构示例（需要给这类文本批量添加效果）：

<nav>
  <div>
    <Image />
    <a>Logo</a>
  </div>
  <div>
    <ul>
      <li>
        <a>Home</a>
      </li>
      <li>
        <a>Work</a>
      </li>
      <li>
        <a>About</a>
      </li>
      <li>
        <a>Contact</a>
      </li>
    </ul>
  </div>
</nav>

我尝试用styled-components实现复用但未成功，代码如下：

import React from 'react';
import styled, { css } from 'styled-components';

const hoverEffect = css`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
  color: white;

  .container:hover & {
    transform: translateY(-100%);
  }

  .container:hover ~ & {
    transform: translateY(0);
    color: dimgray;
  }

  .container ~ & {
    transform: translateY(100%);
  }
`;

const StyledOne = styled.a`
  ${hoverEffect}
`;

const StyledTwo = styled.a`
  ${hoverEffect}
`;

const Container = styled.div`
  position: relative;
  width: 200px;
  height: 100px;
  overflow: hidden;
`;

const App = () => {
  return (
    <Container>
      <StyledOne className="p-10 text-center text-2xl">Work</StyledOne>
      <StyledTwo className="p-10 text-center text-2xl">Work</StyledTwo>
    </Container>
  );
};

export default App;

请问有没有便捷方式，只需指定某个标识就能把这个样式应用到任意元素上？

方案一：自定义Tailwind工具类（贴合当前技术栈，推荐） #

利用Tailwind的自定义工具类封装hover效果，之后给元素添加对应类名即可复用：

1. 修改tailwind.config.js添加自定义工具类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      utilities: {
        'hover-slide-container': {
          position: 'relative',
          overflow: 'hidden',
          width: 'fit-content',
          height: 'fit-content',
        },
        'hover-slide-top': {
          position: 'absolute',
          top: '0',
          left: '0',
          width: '100%',
          height: '100%',
          transition: 'transform 0.5s',
          '&.hover-slide-container:hover &': {
            transform: 'translateY(-100%)',
          },
        },
        'hover-slide-bottom': {
          position: 'absolute',
          top: '0',
          left: '0',
          width: '100%',
          height: '100%',
          transition: 'transform 0.5s',
          transform: 'translateY(100%)',
          '&.hover-slide-container:hover &': {
            transform: 'translateY(0)',
          },
        },
      },
    },
  },
  plugins: [],
};

2. 页面中使用：

<nav>
  <div>
    <Image />
    {/* 给Logo添加效果 */}
    <div className="hover-slide-container">
      <a className="hover-slide-top text-white">Logo</a>
      <a className="hover-slide-bottom text-dimgray">Logo</a>
    </div>
  </div>
  <div>
    <ul>
      <li>
        <div className="hover-slide-container">
          <a className="hover-slide-top text-white">Home</a>
          <a className="hover-slide-bottom text-dimgray">Home</a>
        </div>
      </li>
      {/* 其他菜单项同理 */}
    </ul>
  </div>
</nav>

可根据需求调整工具类的默认样式，比如把宽高改成自适应，或追加Tailwind的间距、字体类来控制细节。

方案二：封装可复用React组件 #

创建通用组件，直接引入即可使用，还能扩展自定义参数：

// components/HoverSlideText.jsx
import React from 'react';

const HoverSlideText = ({ 
  text, 
  topColor = 'text-white', 
  bottomColor = 'text-dimgray', 
  className = '' 
}) => {
  return (
    <div className={`relative overflow-hidden w-fit h-fit ${className}`}>
      <span className={`absolute top-0 left-0 w-full h-full transition-transform duration-500 ${topColor}`}>
        {text}
      </span>
      <span className={`absolute top-0 left-0 w-full h-full transition-transform duration-500 translate-y-full ${bottomColor} group-hover:translate-y-0`}>
        {text}
      </span>
    </div>
  );
};

export default HoverSlideText;

页面中使用：

import HoverSlideText from '@/components/HoverSlideText';

<nav>
  <div>
    <Image />
    <HoverSlideText text="Logo" className="p-2" />
  </div>
  <div>
    <ul>
      <li><HoverSlideText text="Home" /></li>
      <li><HoverSlideText text="Work" /></li>
      <li><HoverSlideText text="About" /></li>
      <li><HoverSlideText text="Contact" /></li>
    </ul>
  </div>
</nav>

你之前styled-components失败的原因 #

选择器逻辑错误：.container:hover ~ & 是选择容器的同级元素，但你的文本元素是容器的子元素，正确写法应该是：

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
  position: relative;
  width: 200px;
  height: 100px;
  overflow: hidden;
`;

const TopText = styled.a`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
  color: white;

  ${Container}:hover & {
    transform: translateY(-100%);
  }
`;

const BottomText = styled.a`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
  color: dimgray;
  transform: translateY(100%);

  ${Container}:hover & {
    transform: translateY(0);
  }
`;

const App = () => {
  return (
    <Container>
      <TopText className="p-10 text-center text-2xl">Work</TopText>
      <BottomText className="p-10 text-center text-2xl">Work</BottomText>
    </Container>
  );
};

export default App;

不过结合当前Tailwind技术栈，更推荐前两种方案。

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