将元素聚焦在 Stripe 上不适用于 Tailwind答案

【问题标题】：Focusing Element on Stripe not working with Tailwind将元素聚焦在 Stripe 上不适用于 Tailwind
【发布时间】：2021-01-31 21:21:07
【问题描述】：

在我的 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。

有什么建议吗？

非常感谢，

【问题讨论】：

标签： reactjs stripe-payments tailwind-css

【解决方案1】：

react-stripe-js 将在 iFrame 中呈现 Stripe 元素，这意味着不会为内部元素提取来自 Tailwind 的 CSS。正如您所注意到的，Stripe 将允许您访问某些 CSS properties，您可以在创建元素时传递这些信息。

您将无法使用 Tailwind 预定义的 CSS 变量和类名，但您可以查看 Tailwind 源代码并使用 :focus 伪元素将它们传递给元素。

【讨论】：