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

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 规则来引用您要更改的 class，例如 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',
        },
      },
    },
  },
  ...
});

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

Is there any way we can style input fields / button of component container?

adyen