Изменить размер шрифта заполнителя

Question

Я пытаюсь изменить размер шрифта заполнителя.Поэтому я включил размер шрифта в следующие классы, но он не меняется.

Можете ли вы сказать мне, как это исправить, чтобы в будущем я сам это исправил.

https://codesandbox.io/s/61183rqp3w

 cssLabel: {
    "&$cssFocused": {
      color: purple[500],
      fontSize: 14
    }
  },
  cssFocused: {},
  cssUnderline: {
    "&:after": {
      borderBottomColor: purple[500],
      fontSize: 14
    }
  },
  cssOutlinedInput: {
    "&$cssFocused $notchedOutline": {
      borderColor: purple[500],
      fontSize: 14
    }
  },
  notchedOutline: {},

Answer 1

Чтобы достичь цели, необходимо изменить свойства стилей ввода в InputProps, например:

Примечание: это будет отображаться ... если переполнение заполнителя.

const styles = theme => ({
  input: {
    "&::placeholder": {
      textOverflow: "ellipsis !important",
      color: "blue",
      fontSize: 14
    }
  }
});

и

компонент должен быть:

<TextField
  InputProps={{
   classes: {
     input: classes.input
   }
  }}
  variant="outlined"
  placeholder="Exp. XXXXXXXXXXXX"
/>

пожалуйста, найдите песочницу с кодом здесь: https://codesandbox.io/s/9j479w189y

Answer 2

для изменения стиля заполнителя вы можете использовать этот код:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

источник: CSS-трюки