如何修改Stripe PaymentElement标签背景色？仿MUI轮廓输入框

问题背景 #

需要实现MUI风格的轮廓输入框：浮动标签位于输入框顶部边框上，通过背景色遮挡该区域的边框线条。使用Stripe PaymentElement的Appearance API调整标签位置后，输入框顶部边框会穿过标签，尝试直接设置标签背景色未找到正确方式，最终通过冗长的textShadow实现了效果，但代码不够简洁。

最优解决方案：直接设置标签背景色 #

Stripe Appearance API支持为浮动标签（.Label--floating）设置background属性，直接用与页面背景一致的颜色覆盖下方边框，这是最简洁高效的方式：

export default function ElementsForm(): JSX.Element {
  return (
    <>
      <Elements
        stripe={getStripe()}
        options={{
          appearance: {
            labels: 'floating',
            rules: {
              '.Label--floating': {
                marginTop: '-10px',
                // 设置与页面背景相同的颜色，遮挡下方边框
                background: '#ffffff',
                // 可选：添加左右内边距，避免文字紧贴边框
                padding: '0 4px',
                opacity: '1',
              },
              '.Input': {
                paddingTop: '0',
                paddingBottom: '0',
                paddingLeft: '15px',
                borderRadius: '25px',
              },
            },
          },
          currency: config.CURRENCY,
          mode: "payment",
          amount: Math.round(config.MAX_AMOUNT / config.AMOUNT_STEP),
        }}
      >
        <CheckoutForm />
      </Elements>
    </>
  );
}

替代方案：优化textShadow实现 #

如果因特殊限制无法使用background，可以通过代码生成紧凑的textShadow，替代手动编写的冗长阴影列表：

// 生成覆盖标签周围的白色阴影
const createTextShadow = (range: number, color: string) => {
  let shadowStr = '';
  for (let x = -range; x <= range; x++) {
    for (let y = -range; y <= range; y++) {
      shadowStr += `${x}px ${y}px 0 ${color}, `;
    }
  }
  return shadowStr.slice(0, -2);
};

export default function ElementsForm(): JSX.Element {
  return (
    <>
      <Elements
        stripe={getStripe()}
        options={{
          appearance: {
            labels: 'floating',
            rules: {
              '.Label--floating': {
                marginTop: '-10px',
                textShadow: createTextShadow(5, '#ffffff'),
                opacity: '1',
              },
              '.Input': {
                paddingTop: '0',
                paddingBottom: '0',
                paddingLeft: '15px',
                borderRadius: '25px',
              },
            },
          },
          currency: config.CURRENCY,
          mode: "payment",
          amount: Math.round(config.MAX_AMOUNT / config.AMOUNT_STEP),
        }}
      >
        <CheckoutForm />
      </Elements>
    </>
  );
}

内容的提问来源于stack exchange，提问作者Aa Ron