Изменение bgcolor вкладок ввода до и после

Question

Я искал, но не могу найти ссылку на ключ, которая позволяет мне обновлять вкладку Inputs pre / post.

<Input
  addonAfter=".com" // <-- I want to change this bg color
  defaultValue="100"
  style={{
    width: '110px',
    backgroundColorAddonAfter: 'red' //HERE, whats the key name?
  }}
/>;

Вкладки «до / после» - это «серые» области, в которых http: и .com. Я хочу изменить эти цвета.

Answer 1

Есть два способа добиться этого:

Переопределить класс CSS

Вы можете переопределить все цвета вкладок post и pre.

/* import ./App.css */

/* first and last are red */
.ant-input-group-addon {
  background-color: red;
}

.ant-input-group-addon:first-child {
  background-color: purple;
}

.ant-input-group-addon:last-child {
  background-color: blue;
}

---

Создайте свой собственный компонент с помощью Input.Group

Здесь мы используем Input.Group , которая группирует компоненты, как это сделано с addonBefore и addonAfter, вам нужно сделать свои собственные PreComponent и PostComponent:

<Input.Group compact>
  <PreComponent color="pink">{'http://'}<PreComponent/>
  <Input style={{ width: '30%' }} defaultValue="my site" />
  <PostComponent color="red">.com<PostComponent/>
</Input.Group>;

Проверьте демо, чтобы понять, что нужно сделать: