Блог

Заполнители элементов Stripe React имеют Opacity: 1 свойство CSS, которое нельзя изменить с помощью объекта style. Другие ::placeholder свойства CSS могут быть изменены.

Объект стиля:

 const iframeStyles = {
        base: {
            color: "#276678", //$blue
            fontSize: "30px",
            lineHeight: "38px",
            fontFamily: "Lato",
            fontWeight: 400,
            "::placeholder": {
              color: "#C8D7DE", //$bluepastel
              opacity: 0,
            }
          },
          invalid: {
          },
          complete: {
          }
    };
 

Firefox проверяет вывод:

Я пытался !important , но это не сработало. Опора непрозрачности просто неприменима. Есть ли какой-либо обходной путь для решения этой проблемы?

Stripe.js» api стилей ограничивает, какие свойства css вы можете изменять. Вы не можете установить opacity . Они, вероятно, не хотят, чтобы ты заставлял что-то исчезать. В документации перечислены свойства css, которые вы можете переопределить.

https://stripe.com/docs/js/appendix/style

Вместо этого вы можете попробовать добавить 00 значение цвета. Это превратит цветовой код в rgba, а две последние шестнадцатеричные цифры будут непрозрачностью цвета.

          color: "#C8D7DE00", //$bluepastel (invisible)