如何使Stripe元素动态地更改下一个主题的样式

Question

我使用条纹元素并根据主题动态地更改输入样式。它可以工作，但我唯一的问题是，如果我在包含条形元素输入的页面上更改主题，我必须硬刷新页面才能看到CSS的变化。

我想要实现的是，当主题发生变化时，风格也会发生变化。请注意，我正在尝试更改backgroundColor。

以下是我目前的情况：

import { useTheme } from "next-themes";

 const { resolvedTheme, setTheme } = useTheme();

  const CARD_OPTIONS = {
    iconStyle: "solid",
    style: {
      base: {
        backgroundColor: `${resolvedTheme === "dark" ? "black" : "white"}`,
        iconColor: "#6D28D9",
        color: `${resolvedTheme === "dark" ? "white" : "#9CA3AF"}`,
        fontWeight: "500",
        fontFamily: "Roboto, Open Sans, Segoe UI, sans-serif",
        fontSize: "16px",
        fontSmoothing: "antialiased",
        ":-webkit-autofill": {
          color: "#fce883",
        },
        "::placeholder": {
          color: "#D1D5DB",
        },
      },
      invalid: {
        iconColor: "#ef2961",
        color: "#ef2961",
      },
    },
  };

<CardElement options={CARD_OPTIONS} />

我尝试过的另一个选项是使用挂载，然后将DARK_CARD_OPTIONS传递给Card元素。

就像这样：

const [mounted, setMounted] = useState(false);

useEffect(() => setMounted(true), []);

 const DARK_CARD_OPTIONS = {
    iconStyle: "solid",
    style: {
      base: {
        backgroundColor: "red",
        iconColor: "#6D28D9",
        color: "white,
        fontWeight: "500",
        fontFamily: "Roboto, Open Sans, Segoe UI, sans-serif",
        fontSize: "16px",
        fontSmoothing: "antialiased",
        ":-webkit-autofill": {
          color: "#fce883",
        },
        "::placeholder": {
          color: "#D1D5DB",
        },
      },
      invalid: {
        iconColor: "#ef2961",
        color: "#ef2961",
      },
    },
  };

  {mounted && (
          <div className="p-4 rounded-lg border border-gray-800 dark:border-gray-600 focus:border-purple-700">
            {resolvedTheme === "dark" ? (
              <CardElement options={DARK_CARD_OPTIONS} />
            ) : (
              <CardElement options={CARD_OPTIONS} />
            )}
          </div>
        )}

由于某些原因，这只会使CardElements输入的某些区域动态变化。

请看下面的截图(请注意，我用红色来突出它)：

​

​

​

​

Answer 1

当主题发生变化时，您必须强制重新挂载CardElement以使其正常工作：

<CardElement key={resolvedTheme} options={CARD_OPTIONS} />