Stripe React Element ::placeholder透明度无法修改解决方案咨询

原因说明 #

Stripe React Elements 内部运行在独立的iframe沙箱中，官方默认强制设置了::placeholder的opacity: 1属性，该属性被设置为不可通过传入的style配置对象覆盖，即使添加!important声明也无法生效，其余placeholder相关样式属性不受此限制。

可行解决方案 #

方案1：使用颜色Alpha通道替代opacity属性（最推荐） #

你要实现的透明度效果完全可以通过给占位符颜色添加alpha透明通道实现，和单独设置opacity效果完全一致，不需要修改其他逻辑：

const iframeStyles = {
  base: {
    color: "#276678",//$blue
    fontSize: "30px",
    lineHeight: "38px",
    fontFamily: "Lato",
    fontWeight: 400,
    "::placeholder": {
      // 原颜色#C8D7DE对应rgb为200,215,222，最后一位参数设置透明度，0为完全透明，1为完全不透明，可按需调整
      color: "rgba(200, 215, 222, 0)",
    }
  },
  invalid: {},
  complete: {}
};

方案2：全局CSS注入（适用于需要单独控制opacity的场景） #

如果你的业务场景需要单独控制占位符的opacity和颜色，可以给Stripe元素绑定自定义类名，再通过全局CSS的::part()伪元素选择器穿透iframe样式隔离：

1. 给Stripe元素添加className配置

<CardElement className="stripe-card-input" options={{style: iframeStyles}} />

2. 在全局CSS文件中添加样式：

.stripe-card-input::part(input)::placeholder {
  opacity: 0 !important;
}

内容的提问来源于stack exchange，提问作者Alan Jereb