如何在 React 中使用 Tailwind CSS 转换背景颜色?
Posted
技术标签:
【中文标题】如何在 React 中使用 Tailwind CSS 转换背景颜色?【英文标题】:How do I transition background color with Tailwind CSS in React? 【发布时间】:2021-08-30 09:10:06 【问题描述】:我正在构建一个 gatsby 网站,并且我希望在我向下滚动时让我的标题更改背景颜色不透明度。解决这个问题的最佳方法是什么?
我目前有这个,其中 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 工作。任何帮助将不胜感激,
谢谢
【问题讨论】:
【参考方案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"`
>
并阅读this article 以检测正确的滚动事件。 编码愉快!
【讨论】:
【参考方案2】:使用duration-[speed]
类添加过渡持续时间。假设您希望转换为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>
【讨论】:
以上是关于如何在 React 中使用 Tailwind CSS 转换背景颜色?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 React 中使用 Tailwind CSS 来配置 Create React App? [关闭]
如何在 React 中使用 Tailwind CSS 转换背景颜色?
React / Tailwind:如何保持动画到位以防止布局错误?
如何使用 useState 在点击时显示/隐藏移动导航栏? React + TypeScript + Tailwind 项目
如何在 Next.js 中使用带有顺风 css 的 React Suite?
如何使用 React Material-UI、fontAwesome 图标和 Tailwind.css 左对齐所有列表项