Rails Braintree - 覆盖 Braintree-dropin.css答案

【问题标题】：Rails Braintree - To override braintree-dropin.cssRails Braintree - 覆盖 Braintree-dropin.css
【发布时间】：2016-02-25 04:55:07
【问题描述】：

我在我的一个 ruby on rails 应用程序中使用 Braintree 作为支付网关。但是我无法为braintree js创建的dropin表单提交自定义braintree提交表单样式（css）。如何自定义/覆盖 css（样式）？

【问题讨论】：

标签： ruby-on-rails-4 braintree braintree-rails

【解决方案1】：

_{全面披露：我在 Braintree 工作。如果您还有任何问题，请随时联系support。}

Braintree 的 Drop-In 表单在外部托管并使用 iFrame 加载到您的页面中。因为表单托管在其他地方，所以您能够更改外观的唯一方法是 Braintree 在 CSS 中创建 javascript 挂钩，就像他们为 Hosted Fields form styling 所做的那样。没有类似的钩子可以让您编辑 Drop-In 表单的 CSS，因此无法更改 Drop-In 的外观。

无法编辑 Drop-In 表单是为了使 Drop-In 尽可能简单而做出的设计选择。如果您开始遇到 Drop-In 表单的限制，请考虑改用 Hosted Fields solution。

【讨论】：

谢谢雅各布。我从 Braitree 支持团队得到了同样的回应。顺便感谢您的关键时间。

【解决方案2】：

虽然 Braintree Drop-In UI JS v2 SDK 不支持 CSS 样式，但 JS v3 SDK does。

引用外部链接：

Drop-in 中的大多数元素都有一个data-braintree-id 属性，可以用于应用特定样式。

引用的例子是：

[data-braintree-id="toggle"] {
  display: none;
}

它继续声明您也可以使用overrides 对象来覆盖样式。

overrides 对象也可以用来改变卡片的样式带有样式对象的字段。您可以覆盖所有字段的样式特定的元素类型...

举个例子：

braintree.dropin.create({
  authorization: 'CLIENT_AUTHORIZATION',
  container: '#dropin-container',
  card: {
    overrides: {
      styles: {
        input: {
          color: 'blue',
          'font-size': '18px'
        },
        '.number': {
          'font-family': 'monospace'
        },
        '.invalid': {
          color: 'red'
        }
      }
    }
  }
});

需要注意的是，两个 SDK 之间的嵌入式 UI 差异很大。

【讨论】：