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

问题描述

我的网站是使用 Next.js 和 Tailwind CSS 构建的。我按照 default instructions 安装它们。由于我想自定义链接的外观，而不是对每个链接应用内联类，因此我还安装了 styled-jsx-plugin-postcss，以便我可以在 Next.js 中使用 styled-jsx already bundled。

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

以下是来自 index.js 的示例代码。 I also uploaded it to 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>
  );
}

解决方法

经过一番挖掘，我意识到当 dark: 变体在 <style jsx> 中使用时，最终 CSS 中生成的 .dark 类也是有作用域的。所以我必须使用 one-off global selector :global():

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

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

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