更改输入前和后标签的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>;

检查演示以了解需要做什么：