如何在 React 中使用 Tailwind CSS 转换背景颜色？

Question

我正在构建一个 gatsby 网站，我希望 header 在我向下滚动时更改背景颜色的不透明度。解决此问题的最佳方法是什么？

我目前有这个，其中 isScrolled 是我正在使用自定义挂钩更新的状态值。我遇到的问题是没有出现过渡，我很确定，因为 React 是 re-rendering 状态更改时的整个组件。

解决这个问题的合适工具/方法是什么？

 <header
          className={
            `h-16 z-10 fixed top-0 left-0 w-screen transition-all`
              ${
               isScrolled ? "bg-white" : "bg-transparent"
             }`
          }
        >
          <div className="px-8 container mx-auto flex items-center justify-between h-full">
            <Logo />
            <nav>
              <HeaderLink to="about-us">About</HeaderLink>
              <HeaderLink to="blog">Blog</HeaderLink>
              <HeaderLink to="contact">Contact</HeaderLink>
            </nav>
          </div>
        </header>

我已经尝试过 HeadlessUI Transition 组件，但它不起作用，因为它只在整个组件中进行转换（而不是属性）而且我无法获得 React-Transition-Group 工作。任何帮助将不胜感激，

谢谢

Answer 1

使用 duration-[speed] class 添加过渡持续时间。假设您希望转换为 200ms

 <header
          className={
            `h-16 z-10 fixed top-0 left-0 w-screen transition-all duration-200`
              ${
               isScrolled ? "bg-white" : "bg-transparent"
             }`
          }
        >
          <div className="px-8 container mx-auto flex items-center justify-between h-full">
            <Logo />
            <nav>
              <HeaderLink to="about-us">About</HeaderLink>
              <HeaderLink to="blog">Blog</HeaderLink>
              <HeaderLink to="contact">Contact</HeaderLink>
            </nav>
          </div>
        </header>

Answer 2

尝试在您的组件中使用它，

...
const [isScrolled, setIsScrolled] = useState(false);
...
  <header
    className={`h-16 z-10 fixed top-0 left-0 w-screen transition-all duration-200
          ${isScrolled ? "bg-white" : "bg-transparent"}`}
  >

并阅读以检测正确的滚动事件。编码愉快！

如何在 React 中使用 Tailwind CSS 转换背景颜色？

How do I transition background color with Tailwind CSS in React?

css

css-transitions

reactjs

gatsby

tailwind-css