条纹支付元素标签背景色

问题描述 投票：0回答：1

我正在尝试重新创建 MUI 轮廓输入，其中标签位于顶部边框上，并带有背景以隐藏该行的该部分。

MUI 示例图像

是否可以更改条纹输入标签的背景颜色？如果没有，有人能够创造性地完成这项工作吗？

我使用“.Label”上的规则尝试了条纹外观 API

编辑1：
抱歉，我忘了提及几件事。我正在使用 Stripe 的 PaymentElement，并且相信我需要使用 appearance API。

export default function ElementsForm(): JSX.Element {
  return (
    <>
      <Elements
        stripe={getStripe()}
        options={{
          appearance: {
            labels: 'floating',
            rules: {
              '.Label--floating': {
                marginTop: '-10px',
              },
              '.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 >
    </>
  );
}

正如您所看到的，我的代码的外观将标签显示在正确的位置，但是，输入的顶部边框穿过它。

当前外观图片

编辑2： 我使用 textShadow 提出了一个丑陋的解决方案，但至少它有效。

工作图像

工作代码：

export default function ElementsForm(): JSX.Element {
  return (
    <>
      <Elements
        stripe={getStripe()}
        options={{
          appearance: {
            labels: 'floating',
            rules: {
              '.Label--floating': {
                marginTop: '-10px',
                textShadow: '-5px -1px 0px #fff, -4px -1px 0px #fff, -3px -1px 0px #fff, -2px -1px 0px #fff, -1px -1px 0px #fff, 0px -1px 0px #fff, 1px -1px 0px #fff, 2px -1px 0px #fff, 3px -1px 0px #fff, 4px -1px 0px #fff, 5px -1px 0px #fff, -5px -2px 0px #fff, -4px -2px 0px #fff, -3px -2px 0px #fff, -2px -2px 0px #fff, -1px -2px 0px #fff, 0px -2px 0px #fff, 1px -2px 0px #fff, 2px -2px 0px #fff, 3px -2px 0px #fff, 4px -2px 0px #fff, 5px -2px 0px #fff, -5px -3px 0px #fff, -4px -3px 0px #fff, -3px -3px 0px #fff, -2px -3px 0px #fff, -1px -3px 0px #fff, 0px -3px 0px #fff, 1px -3px 0px #fff, 2px -3px 0px #fff, 3px -3px 0px #fff, 4px -3px 0px #fff, 5px -3px 0px #fff, -5px -4px 0px #fff, -4px -4px 0px #fff, -3px -4px 0px #fff, -2px -4px 0px #fff, -1px -4px 0px #fff, 0px -4px 0px #fff, 1px -4px 0px #fff, 2px -4px 0px #fff, 3px -4px 0px #fff, 4px -4px 0px #fff, 5px -4px 0px #fff, -5px -5px 0px #fff, -4px -5px 0px #fff, -3px -5px 0px #fff, -2px -5px 0px #fff, -1px -5px 0px #fff, 0px -5px 0px #fff, 1px -5px 0px #fff, 2px -5px 0px #fff, 3px -5px 0px #fff, 4px -5px 0px #fff, 5px -5px 0px #fff, -5px 0px 0px #fff, -4px 0px 0px #fff, -3px 0px 0px #fff, -2px 0px 0px #fff, -1px 0px 0px #fff, 0px 0px 0px #fff, 1px 0px 0px #fff, 2px 0px 0px #fff, 3px 0px 0px #fff, 4px 0px 0px #fff, 5px 0px 0px #fff, -5px 1px 0px #fff, -4px 1px 0px #fff, -3px 1px 0px #fff, -2px 1px 0px #fff, -1px 1px 0px #fff, 0px 1px 0px #fff, 1px 1px 0px #fff, 2px 1px 0px #fff, 3px 1px 0px #fff, 4px 1px 0px #fff, 5px 1px 0px #fff, -5px 2px 0px #fff, -4px 2px 0px #fff, -3px 2px 0px #fff, -2px 2px 0px #fff, -1px 2px 0px #fff, 0px 2px 0px #fff, 1px 2px 0px #fff, 2px 2px 0px #fff, 3px 2px 0px #fff, 4px 2px 0px #fff, 5px 2px 0px #fff, -5px 3px 0px #fff, -4px 3px 0px #fff, -3px 3px 0px #fff, -2px 3px 0px #fff, -1px 3px 0px #fff, 0px 3px 0px #fff, 1px 3px 0px #fff, 2px 3px 0px #fff, 3px 3px 0px #fff, 4px 3px 0px #fff, 5px 3px 0px #fff, -5px 4px 0px #fff, -4px 4px 0px #fff, -3px 4px 0px #fff, -2px 4px 0px #fff, -1px 4px 0px #fff, 0px 4px 0px #fff, 1px 4px 0px #fff, 2px 4px 0px #fff, 3px 4px 0px #fff, 4px 4px 0px #fff, 5px 4px 0px #fff, -5px 5px 0px #fff, -4px 5px 0px #fff, -3px 5px 0px #fff, -2px 5px 0px #fff, -1px 5px 0px #fff, 0px 5px 0px #fff, 1px 5px 0px #fff, 2px 5px 0px #fff, 3px 5px 0px #fff, 4px 5px 0px #fff, 5px 5px 0px #fff',
                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 >
    </>
  );
}
css
1个回答
0
投票

我使用 textShadow 提出了一个丑陋的解决方案，但至少它有效。

工作图像

工作代码：

export default function ElementsForm(): JSX.Element {
  return (
    <>
      <Elements
        stripe={getStripe()}
        options={{
          appearance: {
            labels: 'floating',
            rules: {
              '.Label--floating': {
                marginTop: '-10px',
                textShadow: '-5px -1px 0px #fff, -4px -1px 0px #fff, -3px -1px 0px #fff, -2px -1px 0px #fff, -1px -1px 0px #fff, 0px -1px 0px #fff, 1px -1px 0px #fff, 2px -1px 0px #fff, 3px -1px 0px #fff, 4px -1px 0px #fff, 5px -1px 0px #fff, -5px -2px 0px #fff, -4px -2px 0px #fff, -3px -2px 0px #fff, -2px -2px 0px #fff, -1px -2px 0px #fff, 0px -2px 0px #fff, 1px -2px 0px #fff, 2px -2px 0px #fff, 3px -2px 0px #fff, 4px -2px 0px #fff, 5px -2px 0px #fff, -5px -3px 0px #fff, -4px -3px 0px #fff, -3px -3px 0px #fff, -2px -3px 0px #fff, -1px -3px 0px #fff, 0px -3px 0px #fff, 1px -3px 0px #fff, 2px -3px 0px #fff, 3px -3px 0px #fff, 4px -3px 0px #fff, 5px -3px 0px #fff, -5px -4px 0px #fff, -4px -4px 0px #fff, -3px -4px 0px #fff, -2px -4px 0px #fff, -1px -4px 0px #fff, 0px -4px 0px #fff, 1px -4px 0px #fff, 2px -4px 0px #fff, 3px -4px 0px #fff, 4px -4px 0px #fff, 5px -4px 0px #fff, -5px -5px 0px #fff, -4px -5px 0px #fff, -3px -5px 0px #fff, -2px -5px 0px #fff, -1px -5px 0px #fff, 0px -5px 0px #fff, 1px -5px 0px #fff, 2px -5px 0px #fff, 3px -5px 0px #fff, 4px -5px 0px #fff, 5px -5px 0px #fff, -5px 0px 0px #fff, -4px 0px 0px #fff, -3px 0px 0px #fff, -2px 0px 0px #fff, -1px 0px 0px #fff, 0px 0px 0px #fff, 1px 0px 0px #fff, 2px 0px 0px #fff, 3px 0px 0px #fff, 4px 0px 0px #fff, 5px 0px 0px #fff, -5px 1px 0px #fff, -4px 1px 0px #fff, -3px 1px 0px #fff, -2px 1px 0px #fff, -1px 1px 0px #fff, 0px 1px 0px #fff, 1px 1px 0px #fff, 2px 1px 0px #fff, 3px 1px 0px #fff, 4px 1px 0px #fff, 5px 1px 0px #fff, -5px 2px 0px #fff, -4px 2px 0px #fff, -3px 2px 0px #fff, -2px 2px 0px #fff, -1px 2px 0px #fff, 0px 2px 0px #fff, 1px 2px 0px #fff, 2px 2px 0px #fff, 3px 2px 0px #fff, 4px 2px 0px #fff, 5px 2px 0px #fff, -5px 3px 0px #fff, -4px 3px 0px #fff, -3px 3px 0px #fff, -2px 3px 0px #fff, -1px 3px 0px #fff, 0px 3px 0px #fff, 1px 3px 0px #fff, 2px 3px 0px #fff, 3px 3px 0px #fff, 4px 3px 0px #fff, 5px 3px 0px #fff, -5px 4px 0px #fff, -4px 4px 0px #fff, -3px 4px 0px #fff, -2px 4px 0px #fff, -1px 4px 0px #fff, 0px 4px 0px #fff, 1px 4px 0px #fff, 2px 4px 0px #fff, 3px 4px 0px #fff, 4px 4px 0px #fff, 5px 4px 0px #fff, -5px 5px 0px #fff, -4px 5px 0px #fff, -3px 5px 0px #fff, -2px 5px 0px #fff, -1px 5px 0px #fff, 0px 5px 0px #fff, 1px 5px 0px #fff, 2px 5px 0px #fff, 3px 5px 0px #fff, 4px 5px 0px #fff, 5px 5px 0px #fff',
                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 >
    </>
  );
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.