Как изменить стиль placeholder у input в функциональном компоненте React?

Question

[qqqaa]

Есть следующее React приложение:

const App = () => {

  const style_1 = {"::placeholder": {color: "red"}, width: "500px"}

  return (
    <>
      <input placeholder="hello" style={style_1}/>
    </>
  )
}

export default App

По идее, код должен сделать так, чтобы у input placeholder цвет был красного цвета, а ширина 500px, но единственные, какие стили применяются, это width. Цвет placeholder остается серым.
Нужно именно внутри компонента (не внешним ccs файлом) менять стили у placeholder, но оно не работает. Зачем это нужно? Затем, что в моем большом React приложении нужно только при определенном условии применять лишь определенные стили. И таких элементов со стилями и самих стилей очень много, так что изменение классов не подойдет.

Comments

[Mikhail Osher]

Не уверен, что будет работать нормально, но можно попробовать динамически добавлять/убирать стили. FOUC какой может будет.

Answer 1

[Алексей]

Инлайн стили нельзя использовать для стилизации псевдо элементов. Если не хотите использовать внешний css, то можно взять css-in-js библиотеку например, styled-components или emotion