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

Question

我正在构建一个盖茨比网站，我想让我的标题在向下滚动时更改背景颜色不透明度。解决这个问题的最佳方法是什么？

我目前有这个，其中 isScrolled 是我使用自定义挂钩更新的状态值。我遇到的问题是没有出现任何转换，我很确定，因为当状态发生变化时，React 会重新渲染整个组件。

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

 <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

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

...
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"}`}
  >

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

2023年12月更新版本正在使用

clsx

包

安装clsx包查看此包文档

import clsx from 'clsx'
...
// state define to use conditional logic
const [isScrolled, setIsScrolled] = useState(false);
...
// define base css classes as constant
const base = 'h-16 z-10 fixed top-0 left-0 w-screen transition-all duration-200' as string

return (
   ...
     <header className={clsx(base, isScrolled ? "bg-white" : "bg-transparent")}
  >
   ...
)

其他用法

// Strings (variadic)
clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'

// Objects
clsx({ foo:true, bar:false, baz:isTrue() });
//=> 'foo baz'

// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'

// Arrays
clsx(['foo', 0, false, 'bar']);
//=> 'foo bar'

// Arrays (variadic)
clsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]);
//=> 'foo bar baz hello there'

// Kitchen sink (with nesting)
clsx('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya');
//=> 'foo bar hello world cya'

快乐编码:)