Focusing Element on Stripe 不适用于 Tailwind

Question

在我的 React 应用程序中，我将这段代码放在一个表单中：

<div className="focus:border-orange-400 bg-white border appearance-none border-gray-400"> <CardElement /> </div>

其中 'CardElement' 是 React Stripe Js 的一部分。一切都按预期工作，但不是“focus:border-orange-400”。

正如我从 Stripe 文档中了解到的，您也可以这样做：

           <CardElement
              options={{
                style: {
                  base: {
                    fontSize: '16px',
                    color: '#424770',
                    '::placeholder': {
                      color: '#aab7c4',
                    },
                  },
                  invalid: {
                    color: '#9e2146',
                  },
                },
              }}
            />

但是那样的话，我就无法使用 Tailwind CSS，就像在第一段代码中那样。

有什么建议吗？

非常感谢，

Answer 1

react-stripe-js 将在 iFrame 中呈现 Stripe 元素，这意味着来自 Tailwind 的 CSS 不会被内部元素选中。正如您所注意到的，Stripe 会让您访问某些 CSS properties，您可以在创建元素时传入这些内容。

您将无法使用 Tailwind pre-defined CSS 变量和 class 名称，但您可以查看 Tailwind 源并将它们传递给元素使用:focus pseudo-element.

Focusing Element on Stripe 不适用于 Tailwind

Focusing Element on Stripe not working with Tailwind

stripe-payments

reactjs

tailwind-css