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

Question

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

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

For example, this button

这是在我的里面

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

Answer 1

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

Adyen 提供list of css classes。

对于卡片字段，这些使用 iframe 收集详细信息和 styling information has to provided when initializing the adyen component。

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