时间戳

首页 > 解决方案 > 如何使 Tailwind CSS 的暗模式与 Next.js 和 styled-jsx 一起使用？

javascript - 如何使 Tailwind CSS 的暗模式与 Next.js 和 styled-jsx 一起使用？

问题描述

我的网站是用 Next.js 和 Tailwind CSS 构建的。我按照默认说明安装它们。由于我想自定义链接的外观而不对每个链接应用内联类，styled-jsx-plugin-postcss所以我还安装了，以便可以使用styled-jsx 已经捆绑在 Next.js 中的链接。

它工作得几乎完美，但由于某种原因，<style jsx>标签中应用的暗模式样式被忽略了。我正在使用记录在案class的策略。我怎样才能使这些样式起作用？

下面是来自的示例代码index.js。我也将它上传到 Codesandbox。

import { useState, useEffect } from "react";

export default function IndexPage() {
  const [mounted, setMounted] = useState(false);

  const handleThemeChange = (newTheme) => {
    const bodyClasses = document.body.classList;
    newTheme === "dark" ? bodyClasses.add("dark") : bodyClasses.remove("dark");
    localStorage.theme = newTheme;
  };

  useEffect(() => {
    const defaultTheme =
      localStorage.theme ||
      (window.matchMedia("(prefers-color-scheme: dark)").matches
        ? "dark"
        : "light");
    handleThemeChange(defaultTheme);
    setMounted(true);
  }, []);

  if (!mounted) return null;

  return (
    <div className="dark:bg-black dark:text-white text-xl">
      <ul className="cursor-pointer mb-6">
        <li
          onClick={() => handleThemeChange("dark")}
          className="block dark:hidden"
        >
          Click to activate dark mode
        </li>
        <li
          onClick={() => handleThemeChange("light")}
          className="hidden dark:block"
        >
          Click to activate light mode
        </li>
      </ul>
      <p>
        <a href="#">This link</a> should be red in dark mode.
      </p>
      <style jsx>{`
        a {
          @apply text-green-500 dark:text-red-500;
        }
      `}</style>
    </div>
  );
}

标签： javascriptreactjsnext.jstailwind-cssstyled-jsx

解决方案

经过一番挖掘，我意识到当在dark:内部使用变体时，最终CSS中生成<style jsx>的.dark类也是作用域的。所以我必须使用一次性全局选择器:global()做一个解决方法：

<style jsx>{`
  a {
    @apply text-green-500;
  }

  :global(.dark) a {
    @apply text-red-500;
  }
`}</style>

它需要轻微的代码重构，但恐怕 Tailwind 无法自动绕过范围界定（如果这样做，它甚至可能是一个意想不到的模式？）。

推荐阅读