adyen - 有什么方法可以为组件容器的输入字段/按钮设置样式？

Question

如何在我的 css 中引用 Adyen 组件中的特定标签？

import AdyenCheckout from '@adyen/adyen-web';
import '@adyen/adyen-web/dist/adyen.css';

例如，这个按钮

这是在我的里面

        <div id="component-container"></div>

Answer 1

您可以提供引用您要更改的类的 css 规则，例如为adyen-checkout__buttonadyen 组件创建的任何按钮应用设置或adyen-checkout__button--pay专门更改支付按钮。

Adyen 提供了一个css 类列表。

对于卡片字段，这些使用 iframe 来收集初始化 adyen 组件时必须提供的详细信息和样式信息。

const checkout = new AdyenCheckout({
  paymentMethodsResponse: paymentMethodsResponse,
  clientKey: adyenClientKey,
  paymentMethodsConfiguration: {
    card: {
      styles: {
        base: {
          color: 'black',
          fontSize: '16px',
          fontSmoothing: 'antialiased',
          fontFamily: 'Helvetica',
        },
        error: {
          color: 'red',
        },
      },
    },
  },
  ...
});